//*******************************************************//
//* *//
//* Matrix Object for MOKKA *//
//* *//
//*******************************************************//
//* A. METHODS OF THE OBJECT:
//*
//* 1. Init(DataField,Lang,FormName)
//* Call this function to create the table in the HTML
//* document. Input variables are:
//* - DataField: a string that contains the ID of the
//* corresponding HTML input/text object of
//* the data form.
//* - Lang: a string for setting language "hun"/"eng"
//* - FormName: Name of the form to submit.
//*
//* 2. DisplayMatrix()
//* The function has no input. Call it to display the
//* object and load data from DataField
//*
//* 3. CloseMatrix()
//* The function has no input. Call it to hide the
//* object and save data to DataField.
//* You don't need to call this function directly!
//*
//* 4. SaveAndClose()
//* Occours when user clicks the OK button of the
//* Matrix object. Then stores data to DataField
//* and closes.
//* You don't need to call this function directly!
//*
//* 5. LoadData()
//* Occours when Matrix object is displayed. Then
//* loads data from DataField and checks the given
//* checkboxes.
//* You don't need to call this function directly!
//*
//* 6. SetBg()
//* Sets background layer's size and position.
//* You don't need to call this function directly!
//*
//* 7. CheckBgSize()
//* Event handler function for onresize event. It
//* resizes background layer.
//* You don't need to call this function directly!
//*
//* 8. Sel(t)
//* The input variable t is a reference to an image
//* of the Matrix. This function sets t's opacity to
//* 100% (showing the cell is selected).
//* You don't need to call this function directly!
//*
//* 9. NonSel(t)
//* The input variable t is a reference to an image
//* of the Matrix. This function sets t's opacity to
//* 10% (with darkness showing the cell is not selected).
//* You don't need to call this function directly!
//*
//* 10. NonSelHead(t)
//* The input variable t is a reference to an image
//* of the Matrix. This function sets t's opacity to
//* 30% (with darkness showing the cell is not selected).
//* You don't need to call this function directly!
//*
//* 11.IconClick(x,y)
//* The input variable x and y means col and row indeces
//* beginning from 1. The function changes the state of
//* the given cell (selected or not), including the icon's
//* opacity.
//* You don't need to call this function directly!
//*
//* B. HOW DATA IS STORED BY THE OBJECT?
//*
//* Selected checkboxes are stored by a : separated
//* number pairs in format: column:row. Numbering of
//* cols and rows starts at 0. Number pairs are se-
//* parated by semicolons.
//* Unchecked ones won't be stored.
//*
//* C. OBJECT'S APPEARANCE
//*
//* This .js file comes out with matrix.css which
//* you should include in your HTML document either.
//*
//*******************************************************//
var Matrix = {
Language : "",
DataField : "",
CheckedArray : new Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
FormRef : "",
Init:function(DataField,Lang) {
this.Language = Lang;
this.Data = document.getElementById(DataField);
if(!this.Data) {
alert("Error: Matrix object has no input/output field!");
}
this.DataField = DataField;
this.Background = document.getElementById('matrix_bg');
this.ie = document.all && !window.opera;
this.standardbody = (document.compatMode=="CSS1Compat")? document.documentElement : document.body;
switch(this.Language) {
case "hun": // Creating Hungarian Matrix
document.write('');
this.MatrixTable = document.getElementById('matrix_hu');
break;
case "eng": // Creating English Matrix
document.write('');
this.MatrixTable = document.getElementById('matrix_en');
break;
}
if (window.addEventListener)
window.addEventListener("resize", function(){if (typeof Matrix!="undefined") { Matrix.CheckBgSize(); } }, false)
else if (window.attachEvent)
window.attachEvent("onresize", function(){if (typeof Matrix!="undefined") { Matrix.CheckBgSize(); } })
},
DisplayMatrix:function() {
this.MatrixTable.style.position='absolute';
this.MatrixTable.style.left='20px';
this.MatrixTable.style.top='20px';
this.MatrixTable.style.display='block';
this.LoadData();
this.Background.style.display='block';
this.SetBg();
},
CloseMatrix:function () {
this.Background.style.display='none';
this.MatrixTable.style.display='none';
},
SaveAndClose:function() {
id_start = (this.Language=="hun") ? "h_" : "e_";
res = "";
for(i=0;i<8;i++) {
for(j=0;j<9;j++) {
index=i+9*j;
tn = id_start + i + "_" + j;
entr = i + ':' + j + ';';
st = (this.CheckedArray[index]) ? entr : "";
res = res + st;
}
}
this.Data.value = res;
this.CloseMatrix();
document.forms[0].submit();
},
LoadData:function() {
dat = this.Data.value;
id_start = (this.Language=="hun") ? "h_" : "e_";
for(i=0;i<8;i++) {
for(j=0;j<9;j++) {
tn = id_start + i + "_" + j;
entr = i + ':' + j + ';';
t=document.getElementById(tn);
if(t) {
index=i+9*j;
if(dat.indexOf(entr)!=-1) {
this.Sel(t);
this.CheckedArray[index] = 1;
} else {
if ((i==0)||(j==0)) {
this.NonSelHead(t);
} else {
this.NonSel(t);
}
this.CheckedArray[index] = 0;
}
}
}
}
},
SetBg:function() {
this.domclientWidth=document.documentElement && parseInt(document.documentElement.clientWidth) || 100000;
this.docwidth=(this.ie)? this.standardbody.scrollWidth : (/Safari/i.test(navigator.userAgent))? window.innerWidth : Math.min(this.domclientWidth, window.innerWidth);
this.docheightcomplete=(this.standardbody.offsetHeight>this.standardbody.scrollHeight)? this.standardbody.offsetHeight : this.standardbody.scrollHeight;
this.Background.style.position='absolute';
this.Background.style.width=this.docwidth+"px";
this.Background.style.height=this.docheightcomplete+"px";
this.Background.style.left=0;
this.Background.style.top=0;
},
CheckBgSize:function(){
if (this.Background) {
if (this.Background.style.display=='block') {
this.SetBg();
}
}
},
Sel:function(t){
t.style.opacity=1.0;
t.style.filter="alpha(opacity=100)";
},
NonSel:function(t){
t.style.opacity=0.1;
t.style.filter="alpha(opacity=10)";
},
NonSelHead:function(t){
t.style.opacity=0.3;
t.style.filter="alpha(opacity=30)";
},
IconClick:function(x,y){
index=x+9*y;
id_start = (this.Language=="hun") ? "h_" : "e_";
tn = id_start + x + "_" + y;
t = document.getElementById(tn);
if (t) {
if(this.CheckedArray[index]==1) {
this.CheckedArray[index]=0;
if ((x==0)||(y==0)) {
this.NonSelHead(t);
} else {
this.NonSel(t);
}
} else {
this.CheckedArray[index]=1;
this.Sel(t);
}
}
}
}
// Creating the transparent background layer for the matrix
document.write('
');
