function getIndex(arry,elem) {
	for (var i=0; i < arry.length; i++) {
		if (arry[i] == elem) {
		return i;
		}
	}
}

function getTargetElement(evt) {
    return (evt.target) ? ((evt.target.nodeType == 3) ? evt.target.parentNode : evt.target) : evt.srcElement;
}

function getstyle(elem, prop) {
		if(document.defaultView)
		{
			return document.defaultView.getComputedStyle(elem, null).getPropertyValue(prop);
		}
		else if(elem.currentStyle)
		{
			var prop = prop.replace(/-(\w)/gi, function($0,$1)
			{
				//return $0.charAt($0.length - 1).toUpperCase();
				return $1.toUpperCase();
			});
			return elem.currentStyle[prop];
		}
		else return null;
	}


function jsgrid() {

this.style= {
	id:"src"
	,flow:"Y"	
	,rows:9
	,columns: 18
	,width: 46
	,height: 46
	,gutter:2
	,unit:"px"
	,backgroundColor:"#c00000"
	,isheader:false	
	,onlycolumn:false	
		
};	
this.gridcss ={
width:"100%",overflow:"hidden",textAlign: "center"

};
this.childcss = { position: "relative",cssFloat: "left",backgroundColor:"#6699cc"};
this.cell
}

jsgrid.prototype = { 
init : function(settings) {

for(var i in this.style){
	if(typeof(settings[i])!="undefined")
	  this.style[i]=settings[i]; 
	
}
if (this.style.onlycolumn==false)
this.creategrids(this.style);
else
this.createchilds(this.style);

},

createchilds:function(style){
var colno = style.columns;
var up =1;
var ve = style.gutter/2;;
var gutter = 2*ve/up + style.unit;
this.style.totalwidth = style.width*colno+(colno+1)*style.gutter;
this.style.totalheight = style.rows*(style.height+style.gutter);

this.originalgridwidth = style.width+ style.unit;

this.childcss.width = style.width+ style.unit;
var coldiv0 = this.gridbox(this.childcss);
this.gridcss.height = this.style.height+style.unit;
this.gridcss.marginBottom = gutter;
this.gridcss.backgroundColor = style.backgroundColor
this.cell = this.gridbox(this.gridcss); 	

for(var i=0; i<style.columns; i++){
        var coldiv = coldiv0.cloneNode(false);
        coldiv.style.left =(2*i+2)*ve/up + style.unit;
        coldiv.style.height = this.style.totalheight+style.unit;
        document.getElementById(style.id).appendChild(coldiv);
 }
        document.getElementById(style.id).style.paddingTop=2*ve+style.unit;
        document.getElementById(style.id).style.width = this.style.totalwidth+style.unit;
        document.getElementById(style.id).style.height = style.rows*(style.height+style.gutter)+style.unit;
},

creategrids:function(style){

var colno = style.columns;
var up =1;
var ve = style.gutter/2;;
var gutter = 2*ve/up + style.unit;
this.style.totalwidth = style.width*colno+(colno+1)*style.gutter;
this.style.totalheight = style.height*style.rows +(style.rows)*style.gutter;
this.originalgridwidth = style.width+ style.unit;

this.childcss.width = style.width+ style.unit;
var coldiv0 = this.gridbox(this.childcss);
this.gridcss.height = this.style.height+style.unit;
this.gridcss.marginBottom = gutter;
this.gridcss.backgroundColor = style.backgroundColor
this.cell = this.gridbox(this.gridcss); 	

for(var i=0; i<style.columns; i++){
        var coldiv = coldiv0.cloneNode(false);
        coldiv.style.left =(2*i+2)*ve/up + style.unit;
        for(var j=0; j<style.rows; j++){       
            var rowdiv = this.cell.cloneNode(false);      
            coldiv.appendChild(rowdiv);
            
        }
        
        document.getElementById(style.id).appendChild(coldiv);
        
 }
document.getElementById(style.id).style.paddingTop=2*ve+style.unit;
document.getElementById(style.id).style.width = this.style.totalwidth+style.unit;
document.getElementById(style.id).style.height =this.style.totalheight+style.unit;
},

gridbox: function (sty) {
var coldiv = document.createElement('div');
this.addstyle(coldiv,sty);
return coldiv;
},



grid: function() {
var col = arguments[0][0];
var row = arguments[0][1];

var coldivs =this.getcolumns(col);
var l = coldivs.length;
if (coldivs.length==0) {return "none";}
var r0 = this.getrownoX(coldivs[0]);

if (r0>row) {
 return "['',"+r0+"]";
}
else{

for(var i=0; i<l; i++){
var tagdiv =coldivs[i];
var rx = this.getrownoX(tagdiv);

if (rx==row) {
return tagdiv;

}

else if(rx>row) {

var s = i-1;
var l = i;

return "["+s+","+l+"]";
}
else if((rx<row)&&(i==l-1)) {
return "["+rx+",'']";
}
}
}
},

addgrid:function(grd) {
var test = this.grid(grd);

if (typeof test=='object') {
   return
}
else {

    var col = arguments[0][0];
    var row = arguments[0][1];
   
    if ((row<0)||(row>this.rows)) return;
    
    var divcol = this.getChildNodes()[col];
    var divs = divcol.getElementsByTagName("div");
    var l = divs.length;
    var rowdiv = this.cell.cloneNode(false);  
    if (test=='none') {
       
        divcol.appendChild(rowdiv);
        rowdiv.style.marginTop = (this.style.height+this.style.gutter)*row +this.style.unit;
    }
    else if (test.indexOf("['',")==0)
    {
        
        rowdiv.style.marginTop = (this.style.height+this.style.gutter)*row +this.style.unit;
        divcol.insertBefore(rowdiv,divs[0]);
       
        divs[1].style.marginTop = parseFloat(divs[1].style.marginTop) - (this.style.height+this.style.gutter)*(row+1)+this.style.gutter+this.style.unit;
    }
     else if (test.indexOf(",'']")>0) {
        divcol.appendChild(rowdiv);
        var hh = this.getheightmargin(divs,0,l-1);
        rowdiv.style.marginTop = (this.style.height+this.style.gutter)*row-hh +this.style.unit;
       // rowdiv.style.marginTop = (this.style.height+this.style.gutter)*(row-divs.length+1)+this.style.gutter +this.style.unit;
     }
     else if (test.match(/(\d+),(\d+)/g)!=null) {
     var s= RegExp.$1;
     var l = RegExp.$2;
     rowdiv.style.marginTop = (this.style.height+this.style.gutter)*(row-s-1)+this.style.gutter +this.style.unit;
     divcol.insertBefore(rowdiv,divs[l]);
     var L=parseInt(l)+1;

     divs[L].style.marginTop = parseFloat(divs[L].style.marginTop)+ -(this.style.height+this.style.gutter)*(row-s)+this.style.unit;
     }
}

},
rowspan: function (cell1,cell2) {
if (cell1[0]!=cell2[0]) return;
var col = cell1[0],n = cell1[1],m=cell2[1];
var divcol0 = this.getChildNodes()[col];
var divs = divcol0.getElementsByTagName("div");
var divlen = divs.length;
var ut =this.style.unit;
var marginbottom =this.style.gutter+ut;
if (n==m) {
return;
}
else{
var s = (n>m) ? m : n;
var l = (n>m) ? n : m;}

if (this.Iscontinue(divs,s,l)){
var bkcolor = divs[s].style.backgroundColor;

var vgridheight=0;
for(var i=0; i<l-s+1; i++){ 
vgridheight += parseFloat(divs[s].style.height)+parseFloat(marginbottom);
divcol0.removeChild(divs[s]);

}
vgridheight = vgridheight-parseFloat(marginbottom)+ut;

var style = this.gridcss;
style.height = vgridheight;
style.marginBottom = marginbottom;
style.backgroundColor = bkcolor;
var mergedbox = this.gridbox(style);

if ((l+1)==divlen) {
divcol0.appendChild(mergedbox);
}
else
{
divcol0.insertBefore(mergedbox, divs[s]);
}
return  mergedbox;

}

},

removegrids: function (cell1,cell2) {
var col = cell1[0],n = cell1[1],m=cell2[1];

var divcol0 = this.getChildNodes()[col];
var divs = divcol0.getElementsByTagName("div");
var marginbottom =this.style.gutter+this.style.unit;

var s =(n==m) ? n : (n>m) ? m : n;
var l = (n==m) ? n : (n>m) ? n : m;

var istop = (l>divs.length -1) ? true : false;

if (!divs[s]) {return;}

for(var i=l; i>s-1; i--){ 
 if (divs[i]) {
 l = i;
 break;
 
 }

}

var vgridheight = this.getheightmargin(divs,s,l);

for(var i=0; i<l-s+1; i++){ 

divcol0.removeChild(divs[s]);
}

if (istop==false){

vgridheight = vgridheight+this.style.unit
if (divs[s])
divs[s].style.marginTop =  vgridheight;
}

var divs = divcol0.getElementsByTagName("div");

divcol0.style.height = (this.style.height+this.style.gutter)*this.style.rows +"px";

//divcol0.style.height = (divs.length==0) ? (this.style.height+this.style.gutter)*this.style.rows +"px" : "auto";

},

removeall: function(){
var divcols = this.getChildNodes();
for(var i=0; i<divcols.length; i++){ 
    var divs = divcols[i].getElementsByTagName("div");
    var l = divs.length;
    for(var j=0; j<l; j++){ 
        divcols[i].removeChild(divs[0]);
    }
    divcols[i].style.height = this.style.totalheight+"px";
}

},
getheightmargin: function (divs,s,l) {
var h=0,mt =0,mb=0;
var gt = parseFloat(this.style.gutter);
for(var i=s; i<l+1; i++){ 
var mbb = parseFloat(divs[i].style.marginBottom);
mbb  = isNaN(mbb) ? 0 : mbb;

h += parseFloat(divs[i].style.height);
var mtt = parseFloat(divs[i].style.marginTop);
if (isNaN(mtt)) {
mt = mt;

}
else
{
var n = parseInt(mtt/this.style.height);
mt+=mtt;
}
mb +=mbb;

}

var mtt = (l<divs.length-1) ? parseFloat(divs[l+1].style.marginTop) : 0;
mt += isNaN(mtt) ? 0 : mtt;
var all = (mt>0) ? h+mt+mb : h+mt+mb+gt;
var mts = parseFloat(divs[s].style.marginTop);
mts = isNaN(mts) ? 0 : mts;

if (!this.Iscontinue(divs,s,l)&&(mts==0)) {
all =all+ gt;
}

var sno = this.getrownoX(divs[s]);
if (this.Iscontinue(divs,s,l)&&(sno==0)) {

var all = all-gt; 
}

if (this.Iscontinue(divs,s,l)&&(mt>0)) {

all =all+ gt;

}

return all;

},

Iscontinue: function (divs,s,l) {
var mt =0;
for(var i=s; i<l+1; i++){ 
var mtt = parseFloat(divs[i].style.marginTop);
mt += isNaN(mtt) ? 0 : mtt;
}

return (mt>0) ? false : true;

},

getChildNodes: function() {
var e = document.getElementById(this.style.id).childNodes;
var divs=[];
for(var i=0; i<e.length; i++){
        if (e[i].nodeType==1) 
            divs.push(e[i]);        
}
return divs;
},

getgrids: function (){
var e = document.getElementById(this.style.id);
var rowdivs = [],j=0;
var divcol = e.getElementsByTagName("div");
var l=divcol.length; 
for(var i=0;i<l; i++){
if (divcol[i].parentNode.parentNode==e) {

rowdivs[j] = divcol[i];
j=j+1;

}
}
return rowdivs;
},

getheader: function() {
if (this.style.isheader==true) {
  
var divcols = this.getChildNodes();
var l=divcols.length; 

for(var i=0;i<l; i++){
this.header.push(divcols[i].getElementsByTagName("div")[0])
}
}
return this.header;
},

getcolumns:function() {
var elements = new Array();
var divcols = this.getChildNodes();
for (var i = 0; i < arguments.length; i++) {
		var colno = arguments[i];
		if (typeof colno == 'number'){
		    var divgrids = divcols[colno].getElementsByTagName("div");
		    var s = (this.style.isheader==false) ? 0 : 1;
		    for (var j=s; j<divgrids.length; j++) {
		        elements.push(divgrids[j]);
		    }
		}

}
return elements;
},

getrows:function() {
var elements = new Array();
var divcols = this.getChildNodes();
var l = divcols.length;
for (var i = 0; i < arguments.length; i++) {
var rowno = arguments[i];
		if (typeof rowno == 'number'){
		   
		    for (var j = 0; j < l; j++) {
		        var divgrids = divcols[j].getElementsByTagName("div"); 
		         elements.push(divgrids[rowno]);        		    
		    }	
		
		}
}
return elements;

},

getrowno: function (elm) {

var divs = elm.parentNode.getElementsByTagName("div");
return getIndex(divs,elm);
 
},

getrownoX: function (elm) {

var h=0,mt =0,mb=0;
var divs = elm.parentNode.getElementsByTagName("div");
var index = getIndex(divs,elm);

for (var i=0; i < index+1; i++) {
h += parseFloat(getstyle(divs[i],"height"));
var mtt = parseFloat(getstyle(divs[i],"margin-top"));
mt += isNaN(mtt) ? 0 : mtt;
var mbb =  parseFloat(getstyle(divs[i],"margin-bottom"));
mb += isNaN(mbb) ? 0 : mbb;

}

return parseInt((h+mt+mb)/parseFloat(this.style.height+this.style.gutter))-1;

},

getcolno: function(elm) {
var div0 = this.getChildNodes();
return getIndex(div0,elm.parentNode);
},

getgridsX:function() {
var grids=[];
var div0 = this.getChildNodes();
var divs = this.getgrids();

for(var j=0; j<this.style.rows; j++){
  for(var i=0; i<divs.length; i++){
      if (this.getrowno(divs[i])==j)   
         grids.push(divs[i]);
  }
}
return grids;
},

group:function() {

var grids=[];
var key = this.style.flow;
var divs =(key=="X") ? this.getgridsX() : (key=="Y") ? this.getgrids() : (key!=null) ? key :  this.getgrids();
if (arguments[1]) {
    for(var ev in arguments[1]) {
        if ((ev=="click")||(ev=="mouseover")||(ev=="mouseout")) var evnt = arguments[1];
    }
    
    if ((evnt)&&(arguments[2])) {
        var styl = arguments[2];
    }
    else 
    var styl = arguments[1];
}

for (var i = 0; i < arguments[0].length; i++) {
	var index = arguments[0][i];
	if (typeof(index) == 'string'){
		if (index.indexOf("-")>0) {		
		var s =parseInt(index.split("-")[0]);
		var l = parseInt(index.split("-")[1]);	   
			for(var j=s; j<l+1; j++){
			grids.push(divs[j]);
			
			if (evnt) {
			for(var ev in evnt) {
			addEvent(divs[j],ev,evnt[ev]);		
			}
			}
			
			if (styl) this.addstyle(divs[j],styl);

			}			
		}
	}
	else if (typeof(index) == 'number') {
		grids.push(divs[index]);
		if (evnt) {
		for(var ev in evnt) {
		    addEvent(divs[index],ev,evnt[ev]);		
		}
		}
		if (styl) this.addstyle(divs[index],styl);
	}
}
return grids;
}
,
addEvent: function () {
    var divs = this.getgrids();
    var l = divs.length;
    for(var i=0; i<l; i++){
        for(var ev in arguments[0]) {
          addEvent(divs[i],ev,arguments[0][ev]);	
        }
    }
},
removeEvent: function () {
    var divs = (arguments[1]) ? arguments[1] : this.getgrids();
    var l = divs.length;
    for(var i=0; i<l; i++){
        for(var ev in arguments[0]) {
          removeEvent(divs[i],ev,arguments[0][ev]);	
        }
    }
},
addstyle: function(node,styles) {
  
 if (!node.length) {   
    for(var i in styles){
        if ((document.all)&&(i=="cssFloat")) node.style["styleFloat"]= styles[i];
        node.style[i]= styles[i];
    }
  }
  else 
    for(var j=0; j<node.length; j++){
        for(var i in styles){
        if ((document.all)&&(i=="cssFloat")) node[j].style["styleFloat"]= styles[i];
        node[j].style[i]= styles[i];
    }
    
   }
},
setwidth:function() {
var totalwidth=0;
var width_new = arguments[1]+this.style.unit;
var div0 = this.getChildNodes();
for (var i = 0; i < arguments[0].length; i++) {
var colno = arguments[0][i];
div0[colno].style.width = width_new;
}
for (var i = 0; i < div0.length; i++) {
totalwidth+= parseFloat(div0[i].style.width);
}
this.style.totalwidth = totalwidth;
document.getElementById(this.style.id).style.width = this.style.totalwidth+this.style.unit;
},
setguttercolor:function() {
if (this.style.gutter==0) return;
var divcols = this.getChildNodes();

for(var i=0; i<divcols.length; i++){ 
    divcols[i].style.backgroundColor = arguments[0];
}
document.getElementById(this.style.id).style.backgroundColor=arguments[0];

},
setbackgroundcolor:function(divs,color) {
var dd = typeof(divs)
if ( divs.constructor != Array) divs.style.backgroundColor= color;
else {
var l = divs.length;
for(var i=0; i<l; i++){ 
	divs[i].style.backgroundColor= color;
}
}
}

}

function addEvent ( obj, type, fn ) {
  if ( obj.attachEvent ) {
    obj["e"+type+fn] = fn;
    obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
    obj.attachEvent( "on"+type, obj[type+fn] );
  } else
    obj.addEventListener( type, fn, false );
}
	
function removeEvent ( obj, type, fn ) {
      if ( obj.detachEvent ) {
        obj.detachEvent( "on"+type, obj[type+fn] );
		    obj[type+fn] = null;
      } else
        obj.removeEventListener( type, fn, false );
}

Function.prototype.bind = function(obj) {
	
    var _method = this;
    return function() {
        return _method.apply(obj, arguments);
    };
    
} 

function socialbkmk() {
var u = location.href;
var t = document.title;
location.href = 'http://www.pagecolumn.com/social_bookmark2.htm?pgcoluu='+u+'&pgcoltt='+t;
}