/*
use to create a multi level dropdown menu on any html element define before

dropdown_general(othis,item_id,parent_id,[options]);
othis : the item object
item_id : injected id value to the item that will be used to parent the menu
parent_id : id of the parent which should be in the item_id
options : option available separated by comma

options can be one of these :
- position : direction of the child menu placement, can be one of these (north, east, south, west)
- offsetX : will add the value to the left position of the child menu
- offsetY : will add the value to the top position of the child menu

note :
- the children container should be named as [item_id]_child, to be link with the item
- set the children element with a display none
ex :
<div onmouseover="dropdown_general(this,'parent','','position=south,offsetY=15,offsetY=-10')">Parent</div>
<div id="parent_child" style="display:none">
<div onmouseover="dropdown_general(this,'item1','parent')">Item 1</div>
</div>
<div id="item1_child" style="display:none">
<div onmouseover="dropdown_general(this,'','item1')">Last Item</div>
</div>
*/
var dropdown_last_index=null;
function dropdown_general(othis,item_id,parent_id,option){
var p=parseProp(option);
if(p['position']==null || p['position']=="") p['position']='east';
if(p['offsetX']==null || p['offsetX']=="") p['offsetX']=0;
p['offsetX']=parseInt(p['offsetX']);
if(p['offsetY']==null || p['offsetY']=="") p['offsetY']=0;
p['offsetY']=parseInt(p['offsetY']);

var oitem=othis;
if(item_id) othis.id=item_id;
try{
var ochild=document.getElementById(item_id+'_child');
if(dropdown_last_index==null) dropdown_last_index=parseInt(getLastIndex())+1;
ochild.style.zIndex=dropdown_last_index;
}catch(e){}
try{
var oparent=(parent_id)?document.getElementById(parent_id):null;
}catch(e){}
var oloop;
oitem.oparent=oparent;
oitem.ochild=ochild;
oloop=oitem;
while(oloop){
clearTimeout(oloop.timer);
clearInterval(oloop.timer2);
if(oloop.ochild){
oloop.ochild.style.opacity='1';
oloop.ochild.style.filter="alpha(opacity=100)";
}
oloop=oloop.oparent;
}

oitem.onmouseout=function(){
if(oparent) oparent.onmouseout();
if(ochild!=null && ochild!=''){
oitem.timer=setTimeout(function(){if(ochild!=null) ochild.style.display='none';},500);
oitem.timer2=setInterval(function(){
oitem.alpha=(ochild.style.opacity)?ochild.style.opacity:1;
oitem.alpha=oitem.alpha-(0.03);
if(oitem.alpha<0) oitem.alpha=0;
if(oitem.alpha>0){
ochild.style.opacity=oitem.alpha;
ochild.style.filter="alpha(opacity="+(oitem.alpha*100)+")";
}else{
clearInterval(oitem.timer2);
}
},1);
}
}

if(ochild!=null && ochild!=''){
var l,t,h,w;
var pos=findPos(oitem);
ochild.style.position='absolute';
ochild.style.visibility='hidden';
ochild.style.display='';
h=ochild.offsetHeight;
w=ochild.offsetWidth;
switch(p['position']){
case 'north':
l=pos[0];
t=pos[1]-h;
break;
case 'east':
l=pos[0]+oitem.offsetWidth;
t=pos[1];
break;
case 'south':
l=pos[0];
t=pos[1]+oitem.offsetHeight;
break;
case 'west':
l=pos[0]-w;
t=pos[1];
break;
default:
l=pos[0]+oitem.offsetWidth;
t=pos[1];
break;
}
ochild.style.position='absolute';
ochild.style.left=l+p['offsetX']+'px';
ochild.style.top=t+p['offsetY']+'px';
ochild.style.opacity='1';
ochild.style.visibility='visible';
}
}

function findPos(obj){
var curleft = curtop = 0;
if(obj.offsetParent){
do{
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
}while (obj = obj.offsetParent);
}
return [curleft,curtop];
}
function parseProp(str){
var arrProp,ret=new Array();
if(str==null || str=="") return ret;
var ret=new Array();
var arrStr=str.split(",");
for(var i=0;i<arrStr.length;i++){
arrProp=arrStr[i].split("=");
ret[arrProp[0]]=arrProp[1];
}
return ret;
}
function getLastIndex(){
var m=1;
var all=(document.all)?document.all:document.getElementsByTagName('*');
for(var i in all){
try{
if(parseInt(all[i].style.zIndex)>m) m=parseInt(all[i].style.zIndex);
}catch(e){}
}
return m;
}