//Note: For SlideMenu to work ok, at least 1 group (with at least 1 item) should be Expanded by default.
//      This is required for SlideMenuItemHeight initialization.
function InitSlideMenuGroup(id, SMG) {
	var i, j, gr, box, item;
	var gr=document.getElementById(id);
	gr.onmouseover=function(){
		SMG.SetStyle(this.id,1);
	};
	gr.onmouseout=function(){
		SMG.SetStyle(this.id,0);
	};
	gr.onclick=function(){
		SMG.CollapseExpand();
	};
	var box=document.getElementById('__'+id);
	for(j=0;j<box.childNodes.length;j++) {
		item=box.childNodes[j];
		item.onmouseover=function(){
			SMG.SetStyle(this.id,4);
		};
		item.onmouseout=function() {
			SMG.SetStyle(this.id,3);
		};
	}
	SMG.AttachOnLoad(function() {SMG.SetHeight()}, SMG);
}
function SlideMenuGroup(id, selected_id, CssGroup, CssGroupOver, CssGroupSelected, CssGroupSelectedOver, CssItem, CssItemOver, CssItemSelected, CssItemSelectedOver, CssItemBox) {
	this.id = id;
	this.selected_id = selected_id;
	this.expanded = false;
	this.gr = document.getElementById(id);
	this.box = document.getElementById('__'+id);
	this.CssGroup = CssGroup;
	this.CssGroupOver = CssGroupOver;
	this.CssGroupSelected = CssGroupSelected;
	this.CssGroupSelectedOver = CssGroupSelectedOver;
	this.CssItem = CssItem;
	this.CssItemOver = CssItemOver;
	this.CssItemSelected = CssItemSelected;
	this.CssItemSelectedOver = CssItemSelectedOver;
	this.CssItemBox = CssItemBox;
	this.timer=null;
	this.height=0; 
	this.step=10; 
	this.h=null; 
	this.ff=new Array();
	this.clickedFlag=0;
	this.SetHeightFlag=0;
	this.boxChildNodesLength = 0;
    if(!IsSlideMenuItemHeightInit){
        var box=document.getElementById('__'+this.id);
        if(!isNaN(box.childNodes[0].offsetHeight) && box.childNodes[0].offsetHeight != 0){//When group Expanded by default
            SlideMenuItemHeight = box.childNodes[0].offsetHeight;
            IsSlideMenuItemHeightInit = 1;
        }
    }
}
SlideMenuGroup.prototype.AttachOnLoad =function(f, o) {
	if(window.onload){
		this.ff[this.ff.length] = window.onload;
		this.ff[this.ff.length] = f;
		window.onload = function() {o.OnLoad()};
	} else {
        window.onload = f;
	}
};
SlideMenuGroup.prototype.OnLoad =function() {
	for(var i=0;i<this.ff.length;i++) {
		this.ff[i]();
	}
};
SlideMenuGroup.prototype.Init = function() {
	var i, j, item;
	this.box.className=this.CssItemBox;
	for(j=0;j<this.box.childNodes.length;j++) {
		item=this.box.childNodes[j];
		if(item.id==this.selected_id) {
			this.expanded = true;
			item.className = this.CssItemSelected;
		} else {
			item.className = this.CssItem;
		}
	}
	if(this.gr.id==this.selected_id) {
		this.expanded = true;
	}
	if(this.expanded) {
		this.gr.className=this.CssGroupSelected;
	} else {
		this.gr.className=this.CssGroup;
	}
}
SlideMenuGroup.prototype.SetHeight = function() {
    this.height=this.box.offsetHeight;
	if(this.expanded) {
		this.box.style.display="block";
	} else {
		this.box.style.display="none";
	}
	this.SetHeightFlag = 1;
	if(this.clickedFlag) this.CollapseExpand();
}
SlideMenuGroup.prototype.CollapseExpand = function() {
    if (this.SetHeightFlag){
	    if(this.timer) {
		    window.clearInterval(this.timer);
	    }
        if(this.height==0) {//When group Collapsed by default
	        var box=document.getElementById('__'+this.id);
	        for(var j=0;j<box.childNodes.length;j++) {
		        if(box.childNodes[j].nodeType == 1){
		            this.boxChildNodesLength += 1;
		        }
	        }
	        this.height=this.boxChildNodesLength * SlideMenuItemHeight;
        }
	    if(this.expanded) {
		    this.h=this.height;
		    this.expanded=false;
		    this.gr.className=this.CssGroupOver;
		    this.timer=window.setInterval("SMG"+this.id+".Collapse()",1);
	    } else {
		    this.h=0;
		    this.expanded=true;
		    this.gr.className=this.CssGroupSelectedOver;
		    this.timer=window.setInterval("SMG"+this.id+".Expand()",1);
	    }
    }
    else{
        this.clickedFlag = 1;
    }
}
SlideMenuGroup.prototype.Expand = function() {
	if(this.h > this.height) {
		this.box.style.overflow="auto";
		window.clearInterval(this.timer);
		this.box.style.height=this.height+"px";
		this.expanded=true;
		return;
	}
	this.box.style.display="block";
	this.box.style.overflow="hidden";
	this.box.style.height=this.h+"px";
	this.h += this.step;
}
SlideMenuGroup.prototype.Collapse = function() {
	if(this.h < 1) {
		this.box.style.display="none";
		window.clearInterval(this.timer);
		return;
	}
	this.box.style.overflow="hidden";
	this.box.style.height=this.h+"px";
	this.h -= this.step;
}
SlideMenuGroup.prototype.SetCssClass =function(id,cssClass) {
	var el;
	if(id!=null&&cssClass!=null) {
		el=document.getElementById(id)
		if(el!=null) {
			el.className=cssClass;
		}
	}
};
SlideMenuGroup.prototype.SetStyle =function(id, dl) {
	var css,el;
	if(id==null||dl==null||dl < 0||dl > 5) {
		return;
	}
	el=document.getElementById(id);
	if(el==null) {
		return;
	}
	switch(dl) {
		case 0:
			if(this.expanded) {
				css=this.CssGroupSelected;
			} else {
				css=this.CssGroup;
			}
			break;
		case 1:
			if(this.expanded) {
				css=this.CssGroupSelectedOver;
			} else {
				css=this.CssGroupOver;
			}
			break;
		case 3:
			if(this.selected_id==id) {
				css=this.CssItemSelected;
			} else {
				css=this.CssItem;
			}
			break;
		case 4:
			if(this.selected_id==id) {
				css=this.CssItemSelectedOver;
			} else {
				css=this.CssItemOver;
			}
			break;
		default:
			return;
	}
	this.SetCssClass(id,css);
};