// SF Framework
// Library for menu components

function SF_Menu(sname , ocontainer, stype)
{
 
 this.name = sname;
 this.container = ocontainer;
 
 this.type=stype; // horizontal | vertical | vertical-exp
 
 this.cssStyle = true;
 
 this.width="";//OBSOLETE
 
 this.expanded=false;
 this.switchExpansion = false;
 
 //this.border = "1px solid grey";
 //this.bgColor="white";
 //this.fontSize=11;
 
 this.showTitle=false;
 this.title=sname;
 this.titlePic ="";
 
 this.icon="";
 this.horizontalShift=0;
 this.itemWidth="";//OBSOLETE
 this.imageLabel=false;
 this.imagePath="";
 this.defaultImgType="";
 this.arcShiftEffect=false;
 
 this.linkTarget="_blank";
 this.switchingClick = false;
 this.closeUnselected = true;
 this.openOnMouseOver=false;
 this.enableButtonStates = false;
 
 this.defaultPadding = -1;

 this.stylesheet="mainstyle.css";
 
 this.items = new Array();
 
 this.defaultSettings=function(){
 
  if(this.type=="vertical-exp")
  {
   this.horizontalShift=0;
   this.switchingClick = true;
   this.closeUnselected = true;
   this.openOnMouseOver=false;
  }
  else
  {
   this.horizontalShift=0;
   this.switchingClick = true;
   this.closeUnselected = true;
   this.openOnMouseOver=true;
  }
 
 }
 
 this.add = function(oitem)
 {
  this.items.push(oitem);
  //this.items[this.items.length - 1].id = this.items.length - 1;
 }
 
 this.openMenu = function(id)
 {
  //alert(ssubmenu);
  if(this.switchingClick && this.items[id].expanded)
  {
   this.closeMenu(id);
   return;
  }
  var ssubmenu = this.items[id].name;
  //alert(ssubmenu);
  var osmenu = document.getElementById(this.name + "_" + ssubmenu + "_submenu_div");
  var osbutton = document.getElementById(ssubmenu);
  
  if(this.closeUnselected)
    this.implode();
    
  if(this.type=="vertical-exp")
  {
   var ipadl, orule;
   

   osmenu.style.display="block";
   //osmenu.style.visibility="visible";
  }
  if(this.enableButtonStates)
  {
   //alert('active-' + ssubmenu + "." + this.items[id].imageType);
   osbutton.className = this.name + '_active';
   if(this.items[id].imageLabel)
    document.getElementById('img_' + id.toString()).src=this.imagePath + 'active-' + ssubmenu + "." + this.items[id].imageType; 
  }
  this.items[id].expanded=true;
 }
 
 this.closeMenu = function(id)
 {
  //alert(ssubmenu);
  var ssubmenu = this.items[id].name;
  var osmenu = document.getElementById(this.name + "_" + ssubmenu + "_submenu_div");
  var osbutton = document.getElementById(ssubmenu);
  //alert(ssubmenu);
  if(this.type=="vertical-exp")
  {
   osmenu.style.display="none";
   //alert(osbutton.style.paddingLeft);
   //if(osbutton.style.paddingLeft && osbutton.style.paddingLeft!="0px")
   // osbutton.style.paddingLeft = parseInt(osbutton.style.paddingLeft) - this.horizontalShift;
   
  }
  else
  {
   //osmenu.style.visibility="hidden";
   osmenu.style.display="none";
  }
  
  if(this.enableButtonStates)
  {
   osbutton.className = this.name + '_submenu';
   if(this.items[id].imageLabel)
    document.getElementById('img_' + id.toString()).src=document.getElementById('img_' + id.toString()).src=this.imagePath + ssubmenu + "." + this.items[id].imageType;
  }
  
  this.items[id].expanded=false;
 }
 
 this.explode = function()
 {
  //if(this.type!="vertical-exp")
  // return;
  for(var it=0;it<this.items.length;it++)
   this.openMenu(it); 
 }
 
 this.implode = function()
 {
 // if(this.type!="vertical-exp")
  // return;
  for(var it=0;it<this.items.length;it++)
   this.closeMenu(it);  
 }
 
 
 this.render = function(){
 
  var htmlcnt = "";
  var i;
  var starget="";
  var saction = "onmousedown";
  var menustyle="";
  var display_style="";
  //var buttonwidth=parseInt(this.width / this.items.length);
  if(this.cssStyle)
   menustyle=" class=\"" + this.name + "\" ";
  if(this.openOnMouseOver)
   saction = "onmouseover";
  if(this.linkTarget!="")
   starget=" target=\"" + this.linkTarget + "\" ";
   
  if(this.type!="horizontal")
   display_style="float:left; vertical-align:top;";

  var width_code="";
  var items_width_code="";
  var noncsscode="";
  if(!this.cssStyle)
   noncsscode=" list-style-type: none;margin-left:5px;";
  if(this.width!=''){
   width_code="width:" + this.width + "px;"
   items_width_code=(parseInt(this.width)-1);
   items_width_code="width:" + items_width_code.toString() + "px;";
   if(this.type=="horizontal"){
    width_code="width:100%;"
    items_width_code=(100/ this.items.length);
    items_width_code='width:' + parseInt(items_width_code.toString()).toString() + "%;";   
   } 
  }
  htmlcnt = "<ul style=\"" + noncsscode + width_code + "\" id=\"" + this.name + "_ul\">";
  
  for(i=0;i<this.items.length;i++)
  {
   
   var item = this.items[i];
   var cssclass = "";
   var mouseovercss = "";
   var activecss = "";
   
   item.id=i;
   if(this.imageLabel)
    item.imageLabel=true;
   if(this.defaultImgType!="")
    item.imageType=this.defaultImgType;
   if(this.defaultPadding>=0)
    item.padding=this.defaultPadding;  
  
    
   if(this.cssStyle)
    cssclass= " class=\"" + this.name + "_" + item.type + "\" ";
   
   if(this.enableButtonStates && this.cssStyle)
   {
    var pict_var="";
    var pict_var2="";
    if(item.imageLabel)
    {
     pict_var="document.getElementById('img_" + i.toString() + "').src='" + this.imagePath + "over-" + item.name + "." + item.imageType + "'";
     pict_var2="document.getElementById('img_" + i.toString() + "').src='" + this.imagePath + item.name + "." + item.imageType + "'";
    }

    mouseovercss = " onmouseover=\"if(!" + this.name + ".items[" + i.toString() + "].expanded){this.className='" + this.name + "_over';" + pict_var + "}\" onmouseout=\"if(!" + this.name + ".items[" + i.toString() + "].expanded){this.className='" + this.name + "_" + item.type + "';" + pict_var2 + "}\" ";
    activecss = "";
   } 
    
   var itemcontainer = "<li style=\"" + items_width_code + "\"  " + cssclass +" id=\"" + this.name + "_" + item.name + "_submenu\">";
   var endtag = "</li>";
  
   var icon_tag = "";
   if(item.icon != "")
    icon_tag = "<img src=\"" + item.icon + "\">";
   
   if(this.type!="vertical-exp")
    if(this.type=="vertical")
     itemcontainer = "<li style=\"" + items_width_code + "\" " + cssclass + " id=\"" + this.name + "_" + item.name + "_submenu\" " + mouseovercss + ">";
    else
     itemcontainer = "<li style=\"" + items_width_code + "float:left;\" " + cssclass + " id=\"" + this.name + "_" + item.name + "_submenu\" " + mouseovercss + ">";

   
   if(item.imageLabel)
    item.label = "<img id=\"img_" + i.toString() + "\" src=\"" + this.imagePath + item.label + "." + item.imageType + "\">";
    
   if(item.type=="option")
     htmlcnt += itemcontainer + "<a href=\"" + item.url + "\" " + starget + " >" + icon_tag + item.label +  "</a>" + endtag;
   else
   {
    var span_display = "";
    var span_expand="";
    if(this.type=="horizontal")
     span_display = " display:block; ";
    
    if(this.type=="horizontal")
     span_display = " display:block; ";
     
    htmlcnt += itemcontainer + icon_tag + "<span  style=\"" + items_width_code + span_display + "\" class=\"" + this.name + "_submenu_caption\" " + saction + "=\"" + this.name + ".openMenu(" + i + "); \">" + item.label + "</span>"; 
    htmlcnt = item.render(htmlcnt, this) + endtag;
   }
     
  }
  htmlcnt += "</ul>"; 
  //alert(htmlcnt);
  this.container.innerHTML=htmlcnt;
  //this.container.innerHTML="<textarea>" + htmlcnt + "</textarea>"; 
 }
 
 this.setActiveState = function(itmname)
 {
  if(this.enableButtonStates)
  {//alert(document.getElementById(itmname).className);
   document.getElementById(itmname).className=this.name + '_active';
  }
   
 }
 
 return this;
}

function SF_MenuItem(slabel, stype)
{
 this.id=0;
 this.label = slabel;
 this.type=stype; // option | submenu
 this.name = slabel;
 
 this.icon = "";
 this.bgColor="";
 this.bgImage="";
 this.bold = true;
 
 this.imageLabel = false;
 this.imageType="gif";
 
 this.items = new Array();
 
 this.href = "";
 
 this.padding = 10;
 
 this.expanded = false;

 this.add = function(oitem)
 {
  this.items.push(oitem);
 }
 
 this.render = function(htmlcode, parent)
 {
  
  var s;
  var pname = parent.name;
  var vert_br = "";//OBSOLETE
  var starget="";
  var menuwidth=parent.itemWidth;
  
  var div_position = "";
  
  if(parent.type!="vertical-exp")
   //menuwidth="100%";
   div_position = "position:absolute;";
   
  if(parent.linkTarget!="")
   starget=" target=\"" + parent.linkTarget + "\" ";
  var cssclass="";
  var linkcssclass="";
  
  if(parent.cssStyle){
   cssclass= " class=\"" + pname + "_" + "submenu_body\" ";
   linkcssclass= " class=\"" + pname + "_submenu_option\" ";
  }
  var noncsscode="";
  if(!parent.cssStyle)
   noncsscode=" list-style-type: none;margin-left:5px;";
   
  var div_width="";
  if(parent.width!="")
    div_width="width:100%;";
  var menu_head = "<div  style=\"" + div_width + div_position + "z-index:30;display:none;\" id=\"" + parent.name + "_" + this.name +"_submenu_div\" " + cssclass + " onmouseover=\"this.style.display='block';" + parent.name + ".setActiveState('" + this.name + "');\" onmouseout=\"" + parent.name + ".closeMenu(" + this.id.toString() + ");\" >";
  if(parent.type=="vertical-exp")
   menu_head = "<div style=\"display:none;\" id=\"" + parent.name + "_" + this.name +"_submenu_div\" " + cssclass + " onmousedown=\"return false;\">";
  menu_head += "<ul style=\"padding-left:0px;margin-left:0px;" + noncsscode + "\" id=\"" + parent.name + "_" +  this.name +"_submenu_ul\" >";
  htmlcode += menu_head;

  for(s=0;s<this.items.length;s++)
  {
  
   var sitem = this.items[s];
   var sitm_cont = "<tr><td>";
   var sendtag = "</td></tr>";
   var icon_tag = "";
   
   if(sitem.icon != "")
    icon_tag = "<img src=\"" + sitem.icon + "\" style=\"border:0px none;vertical-align:middle;float:left;clear:right;paddig-left:5px;\">";

   sendtag = "</li>";

   htmlcode += "<li " + linkcssclass + " id=\"" + parent.name + "_" + this.name +"_option_" + s.toString() + "\"><a " + linkcssclass + " href=\"" + sitem.url + "\" " + starget + " style=\"text-align:left;\">" + icon_tag + sitem.label + "</a>" + sendtag;
  }

  htmlcode += "</ul></div>";
   
  return htmlcode;
 }
 
 return this;
 
}