//current visible div
var __curentVisibleDiv	= null;

//holding references to divs 
var __divCollection 	= Array();



function showDiv(parentObjId,index, isVisible){
	
	//need parent to calculate where to draw the div 
	var parentObj	= document.getElementById(parentObjId);
	
	if((parentObj == null) ){
		return;
	}
	
	if(__divCollection[index] == null){
		var div	= createNewDiv(parentObj,index);
		__divCollection[index]	= div;
	} 
	
	
	if(isVisible == 1){
		__curentVisibleDiv	= index;
		onMouseOver();
	}else{
		onMouseOut();
	}
		

}


function closeDiv(index){
	
	
	var div	= __divCollection[index];
	
	if(div != null){
		div.style.visibility	= 'hidden';
	}

}

function openDiv(index){
	
	var div	= __divCollection[index];
	
	if(div != null){
		div.style.visibility	= 'visible';
	}

}

function createNewDiv(parentObj,index){

	var table	= document.createElement("table");
	table.className			= __categoryDiv[index];
	table.cellSpacing		= 0;
	table.cellPadding		= 0;
	table.style.position	= 'absolute';
	table.style.display		= 'block';
	table.style.top 		= (getTop(parentObj.id) + parentObj.height - 4)+ 'px';
	table.style.left 		= (getLeft(parentObj.id) + 0) + 'px';
	table.id 				= '__TABLE__' + parentObj.id;
	__curentVisibleDiv		= index;
	var tr				= table.insertRow(-1);
	var td				= tr.insertCell(-1);
	var str				= '';
	td.valign			= 'top';
	td.width			= '228px';
	td.onmouseover		= onMouseOver;
	td.onmouseout		= onMouseOut;
	str					+= '<div class="'+__categoryBorderBottom[index]+'"><img src="dsg/spacer.gif" width="1" height="1" border="0" alt="" /></div>';
	str					+= '<div class="'+__categoryBorderLeft[index]+'">';
	var items	= Array();
	if(__items[index] != null){
		items			= __items[index][0];
	}
	str			+='<table cellspacing="0" cellpadding="0" border="0" style="width:100%;display:inline;" class="categoryDivText">';
	if(__items[index][4] == 1){ //category active
		str			+='<tr>';
		str			+='		<td class="'+__categoryItemIntro[index]+'">'+__items[index][2]+'</td>';
		str			+='</tr>';
		
		if(items != null && items.length>0){
			for(var i = 0; i < items.length;i++){
				/**
				 * item Array 
				 * 0 - id
				 * 1 - name
				 * 2 - extra text
				 * 3 - is separator
				 **/
				var item			= items[i];
				if(__items[index][1] == 1){
					str	+= getItemWithComment(index,item,__items[index][3]);
				} else {
					var drawBottomBorder = true;
					if(i == (items.length-1)){
						drawBottomBorder = false;	
					}
					str	+= getItemWithoutComment(index,item, drawBottomBorder,__items[index][3]);
				}
				
				//td.innerHTML		+='	'+item[1]+'<br />';
				
			}
			
		
		}
	} else {
		str			+='<tr>';
		str			+='		<td class="'+__categoryItemIntro[index]+'">Coming soon ...</td>';
		str			+='</tr>';
		
		//this here is dirty hack as well...
		if (index == 4)  {
			str			+='<tr>';
			str			+='		<td class="categoryItem'+ ( index + 1 ) +'"  onmouseover="javascript:changeClass(this,\'categoryItemOver'+ ( index + 1 ) +'\');" onmouseout="javascript:changeClass(this,\'categoryItem'+ ( index + 1 ) +'\');" ><a href="?TASK=list_products&category=' + (index + 1) + '&i"  class="categoryItemLink'+ ( index + 1 ) +'" target="_blank">Introduction</a></td>';
			str			+='</tr>';
			str			+='<tr>';
			str			+='		<td  onmouseover="javascript:changeClass(this,\'categoryItemOver'+ ( index + 1 ) +'\');" onmouseout="javascript:changeClass(this,\'categoryItem'+ ( index + 1 ) +'\');" class="categoryItem'+ ( index + 1 ) +'"><a href="http://www.emkoelektronik.com.tr/" target="_blank" class="categoryItemLink'+ ( index + 1 ) +'">http://www.emkoelektronik.com.tr/</a></td>';
			str			+='</tr>';
		}
	}
	str			+='</table>';
	str			+= '</div>';
	str			+= '<div class="'+__categoryBorderTop[index]+'"><img src="dsg/spacer.gif" width="1" height="1" border="0" alt="" /></div>';
	/**
	THIS IS A DIRTY HACK !!! 
	FIXME for the update!
	**/
	if(index == 1){
		str 	+='<div style="margin-left:20px;color:red;">or <a style="color:red;text-decoration:none;font-weight:bold;" href="index.php?TASK=list_products&category=2&path=/6"> Kilo Watts</a></b></div>';
	}
	
	td.innerHTML	= str;
	document.body.appendChild(table);			
	return table;
}


//gets Y of object
function getTop (id) {
	var top = 0;
    var obj = document.getElementById(id);
	if(obj == null) return;
	if (obj.offsetParent) {
		while (obj.offsetParent) {
			top += obj.offsetTop;
			obj = obj.offsetParent;
		}
	} else if (obj.x)
		top += obj.x;
	
	return top;
}

//gets X of object
function getLeft (id) {
	var left = 0;
    var obj = document.getElementById(id);
	if(obj == null) return;
	if (obj.offsetParent) {
		while (obj.offsetParent) {
			left += obj.offsetLeft;
			obj = obj.offsetParent;
		}
	} else if (obj.x)
		left += obj.x;
	
	return left
}


function onMouseOver(){
	openDiv(__curentVisibleDiv);
	changeButton(__curentVisibleDiv, 1);
}

function onMouseOut(){
	closeDiv(__curentVisibleDiv);
	changeButton(__curentVisibleDiv, 0);
}


function getItemWithComment(index,item,catId){
	var str		= '';
	str			+='<tr>';
	str			+='		<td style="width:100%;">'+item[2]+'</td>';
	str			+='</tr>';
	str			+='<tr>';
	if(item[4] != null){
		str			+='		<td><a href="'+item[4]+'" class="'+__categoryItemLink[index]+'" >'+item[1]+'</a></td>';
	} else {
		str			+='		<td><a href="#" class="'+__categoryItemLink[index]+'" >'+item[1]+'</a></td>';
	}
	str			+='</tr>';
	str			+='<tr>';
	str			+='		<td style="height:15px;"></td>';
	str			+='</tr>';
	return str;
}

function getItemWithoutComment(index,item,drawBottomBorder, catId){
	var className		= __categoryItem[index];
	var classNameOver	= __categoryItemOver[index];
	if(!drawBottomBorder){
		className		= __categoryItemNoBorder[index];
		classNameOver	= __categoryItemNoBorderOver[index];
	}

	var str		= '';

	str			+='<tr>';
	
	if(item[3] == 0){
		str			+='		<td class="'+className+'" onmouseover="javascript:changeClass(this,\''+classNameOver+'\');" onmouseout="javascript:changeClass(this,\''+className+'\');">';
		str			+='			<a href="'+item[4]+'" class="'+__categoryItemLink[index]+'">'+item[1]+'';
		if(item[2]){
			str		+= '<br /><span style="font-size:10px">'+item[2]+'</span>';
		}
		str			+='</a>';
	} else {
		str			+='		<td class="'+className+'">';
		str			+='<span class="'+__categoryItemSeparator[index]+'">'+item[1]+'</span>';
	}
	str			+='		</td>';
	str			+='</tr>';
	
	return str;
}

function changeClass(obj, className){
	if(obj == null) return;
	obj.className	= className;
}