// Menu code Notes.
// This menu code is used for all languages ANd for the FAQ menu



/******************************************* Styles & Positions for the menus *****************************************/

/* --- geometry and timing of the menu for all menus--- */
var MENU_POS_ALL = {
	// item sizes for different levels of menu
	'width': [100, 250, 250],
	'height': [30, 30, 30],
	// menu block offset from the origin:
	//	for root level origin is upper left corner of the DIV (0)
	//	for other levels origin is upper left corner of parent item (20,20)
	'block_top': [0, 30, 30],
	'block_left': [0, 0, 0],
	// offsets between items of the same level
	'top': [0, 30, 30],
	'left': [100, 0, 0],
	// time in milliseconds before menu is hidden after cursor has gone out
	// of any items
	'hide_delay': [200, 200, 200]
};
	


/******************************************* Code *********************************************/


/////////////////////////////////////////////////////////////////////////////////////////////////////////
// Menu container class  
// Initilise by code as follows 
//
// <script language="JavaScript">
// <!--
// 	var menus = new Array(); // NB constructor below actually loads first element into array!!!
//	new menu( MENU_ITEMS_MAIN_ENG ); // eng can be replaced by ESP, GER, FRA
// -->
// </script>
//
// and of course this file, scada_menu_main_eng.js data file and scada_general.js must be refernced in earlier in the HTML page
//
function menu (items_struct) 
{
 
    var up_src_string;
    var dn_src_string;
    var ovr_src_string;

    // Attach data structures, variable for text, global for pos and style
    this.item_struct = items_struct; // the variable language and items data
    this.pos = MENU_POS_ALL;        // one pos struct for all menus
 
    // Initialise arrays (empty to start)
    this.items = [];
    this.children = [];

    // use the current length of the array to set this items "id" (index ...will be 0)
    this.id =  this.items.length; // use length to tell us the index of this item (0)
 	
    //Add class methods to class (all functions below)
    this.add_item = menu_add_item; // the function below to add an item
    this.hide = menu_hide;
    this.onclick = menu_onclick;
    this.onmouseout = menu_onmouseout;
    this.onmouseover = menu_onmouseover;
    this.onmousedown = menu_onmousedown;
    this.onmouseup = menu_onmouseup;

    // save the images we are going to use for up and down button
    this.up_image = new Image();
    this.dn_image = new Image();
    this.ovr_image = new Image();
 

    up_src_string = "" + general_get_path("images") + 'up-button-silver.jpg'+ "";
    this.up_image.src = up_src_string;

    dn_src_string = "" + general_get_path("images") + 'dn-button-cyan.jpg' + "";
    this.dn_image.src = dn_src_string;

    ovr_src_string = "" + general_get_path("images") + 'ovr-button-cyan.jpg' + "";
    this.ovr_image.src = ovr_src_string;

    // 
    // Hook utility functions to our main class
    //
    this.get_path =           general_get_path;                // hook the path generator function

    // Loop thru the outer level of menu item struct making top level menu items	
    var i;
    for (i = 0; i < this.item_struct.length; i++)
    {
        // this is a recursive constructor that also creates children of the top level
  	new menu_item(i, this, this);
    }

    // For all children on the top level ,set visible
    for (i = 0; i < this.children.length; i++)
    {
	this.children[i].visibility(true);
    }

  
}

//////////////////////////////////////////////////////////////////////////////////////////////
//
// Add the passed in menu to the items array of the menu (at position[length])
// returns the position it was added at!
//

function menu_add_item (item) 
{
    var id = this.items.length;
    this.items[id] = item;
    return (id);
}


//////////////////////////////////////////////////////////////////////////////////////////////
//
// For this Menu go thru all contained items
// turn vis off and change style to mouse being out
//

function menu_hide () 
{
   for (var i = 0; i < this.items.length; i++) {
	this.items[i].visibility(false);
   }
}


//////////////////////////////////////////////////////////////////////////////////////////////
//
// Menu receives a click
// turn vis off and change style to mouse being out
//

function menu_onclick (id) {
    var item = this.items[id];
    return (item.fields[1] ? true : false);
}


//////////////////////////////////////////////////////////////////////////////////////////////
//
// Menu item  receives mouse has gone out message
// Set the hide timer and stop it being the active item
//

function menu_onmouseout (id) 
{
    this.hide_timer = setTimeout('menus['+ this.id +'].hide();', this.pos['hide_delay'][this.active_item.depth]);
    if (this.active_item.id == id) this.active_item = null;

   document.images[this.items[id].imagename].src =  this.up_image.src;

   // Set color and pos of text
   this.items[id].placeTextInPos(id, 0, "#1A1A1A") 

}

//////////////////////////////////////////////////////////////////////////////////////////////
//
// Menu item receives "mouse has gone on to it" message
// Set the chosen item to "mouse over" style and the others to "mouse out"  style
// Set it being the active item as well
//

function menu_onmouseover (id) 
{

    this.active_item = this.items[id]; // Set to be active item

    clearTimeout(this.hide_timer); // Clear any timers

    var curr_item, visib;
    
    // Loop thru upper level 
    for (var i = 0; i < this.items.length; i++) 
    {
	curr_item = this.items[i]; // store current item in loop

        // Check visibility (i think??)
	visib = (curr_item.arrpath.slice(0, curr_item.depth).join('_') == this.active_item.arrpath.slice(0, curr_item.depth).join('_'));

        curr_item.visibility(visib);
	
    }

   document.images[this.items[id].imagename].src =  this.ovr_image.src;
  
   // Set color and pos of text
   this.items[id].placeTextInPos(id, 0, "#ffffff") 

    
}


//////////////////////////////////////////////////////////////////////////////////////////////
//
// Menu item text writer changes position if depressed
//

function menuitem_placeTextInPos(id, depressed, color) 
{
  var mystr;

  // Find the element and switch the color of text
  this.textelement.style.color = color;

  var textx =  (this.container.pos['width'][this.depth]/12) ;
  var texty =  (this.container.pos['height'][this.depth]/4) ;

  if (depressed) {
      textx += 2;
      texty += 2;
  }

  mystr = textx + 'px';
  this.textelement.style.left = mystr;
  mystr = texty + 'px';
  this.textelement.style.top  = mystr;

}



//////////////////////////////////////////////////////////////////////////////////////////////
//
// Menu item receives "mouse down" message
// Set the style
//

function menu_onmousedown (id) {

   // these menu bar items will also now change image to the supplied up and down button
  document.images[this.items[id].imagename].src =  this.dn_image.src;
   
   // Set color and pos of text
  this.items[id].placeTextInPos(id, 1, "#ffffff") 

}


//////////////////////////////////////////////////////////////////////////////////////////////
//
// Menu item receives "mouse down" message
// Set the style
//

function menu_onmouseup (id) {

   
   // these menu bar items will also now change image to the supplied up and down button
   // Switch the image
   document.images[this.items[id].imagename].src =  this.up_image.src;

   // Set color and pos of text
   this.items[id].placeTextInPos(id, 0, "#1A1A1A") 

 
}



/////////////////////////////////////////////////////////////////////////////////////////////////////////
// Menu item class 
// Constructore of the bars of the menu
// It is recursive and wil create sub items
//

function menu_item (path, parent, container) 
{
   this.path = new String (path);
   this.parent = parent;
   this.container = container;
   this.arrpath = this.path.split('_');
   this.depth = this.arrpath.length - 1;
   // get pointer to item's data in the structure
   var struct_path = '', i;
   for (i = 0; i <= this.depth; i++)
   {
	struct_path += '[' + (Number(this.arrpath[i]) + (i ? 2 : 0)) + ']';
   }

   eval('this.fields = this.container.item_struct' + struct_path);
   
   if (!this.fields) return;
	
   // assign methods	
   this.get_x = mitem_get_x;
   this.get_y = mitem_get_y;
   // these methods may be different for different browsers (i.e. non DOM compatible)
   this.init = mitem_init;
   this.visibility = mitem_visibility;
   this.placeTextInPos = menuitem_placeTextInPos;
	
   // register in the collections
   this.id = this.container.add_item(this);
   parent.children[parent.children.length] = this;
   
	
   // init recursively
   this.init();
   this.children = [];
   var child_count = this.fields.length - 2;
   for (i = 0; i < child_count; i++)
   {
	new menu_item (this.path + '_' + i, this, this.container);
   }

}

/////////////////////////////////////////////////////////////////////////////////////////////////////////
//
// Initialise an menu items display
//
//

function mitem_init() 
{
    var imagezindex;
    var itemzindex;
    
    itemzindex = this.depth+10;  // Extended from +0 by dave so it gets on top of all
    imagezindex = this.depth+11; // Extended from +1 by dave so it gets on top of all
    textzindex = this.depth+12;  // Extended from +2 by dave so it gets on top of all
    var textx =  this.container.pos['width'][this.depth]/12;
    var texty =  this.container.pos['height'][this.depth]/4;


    var ButtonWidth;
    var ButtonHeight;

    ButtonWidth =  this.container.pos['width'][this.depth];
    ButtonHeight = this.container.pos['height'][this.depth];
 
    // save the images name so we can swap source as required
    this.imagename  = 'mi_' + this.container.id + '_' + this.id;
 
    document.write (
       // define the DIV initial image tag in a div for setting up TEXT
        '\n<div ' 
        + '" style="position: absolute; top: '
	+ this.get_y() + 'px; left: '	+ this.get_x() + 'px; width: '
	+ this.container.pos['width'][this.depth] + 'px; height: '
	+ this.container.pos['height'][this.depth] + 'px; visibility: hidden;'
	+'z-index: ' + itemzindex  + ';" '
        + '>'

        //define the A ANCHOR tag for setting up postion, link and rollover features 
	+'\n\t<a id="mi_' + this.container.id + '_'
	+ this.id +'" class="menulink"'
	+'href="' + this.fields[1]  + '"'
	+ 'onclick="return menus[' + this.container.id + '].onclick('
	+ this.id + ');" onmouseout="menus[' + this.container.id + '].onmouseout('
	+ this.id + ');" onmouseover="menus[' + this.container.id + '].onmouseover('
	+ this.id + ');" onmousedown="menus[' + this.container.id + '].onmousedown('
	+ this.id + ');" onmouseup=  "menus[' + this.container.id + '].onmouseup('
	+ this.id + ');"'
	+ ' style="position: absolute; ; z-index:' + imagezindex + '; top: ' 
        +  '0px;left: 0px; margin: 0px; width: '
	+ this.container.pos['width'][this.depth] + 'px; height: '
	+ this.container.pos['height'][this.depth] +' " >'
             // define the IMG initial image tag for setting up the button
        + '\n\t<img name="' + this.imagename +'"'
        + 'src="' + this.container.up_image.src   +'"'
	+ ' alt=""'	
	+ ' width = "'+  this.container.pos['width'][this.depth]  +'"'
	+ ' height = "'+ this.container.pos['height'][this.depth]  +'"'
//        + ' border = "0"'
  	+ ' style="border: 0px; position: absolute; ; z-index:' + imagezindex + '; top: ' 
        +  '0px;left: 0px;'
        +  'width: '+ ButtonWidth  + 'px; height: '
        +  ButtonHeight + 'px;'
        + '">'
        +  '\n\t<p class="mMenuText" id="mi_' + this.container.id + '_' + this.id + '-text"'
                 
	+  'style="position: absolute; ; z-index:' + textzindex + '; top: ' 
        +  texty +'px;left: ' + textx +'px; margin: 0px; width: '
	+  this.container.pos['width'][this.depth] + 'px; height: '
	+  this.container.pos['height'][this.depth] + 'px;" >'
 	+  this.fields[0] 
        +   '</p>'
        +  '\n</a>'
        +  '</div>'
    );
    // set up element id
    this.element = document.getElementById('mi_' + this.container.id + '_' + this.id);
    this.textelement = document.getElementById('mi_' + this.container.id + '_' + this.id + '-text');
}

/////////////////////////////////////////////////////////////////////////////////////////////////////////
//
// Initialise an menu items visibility and detect it
// Same function for both, pass in null to just detect it
//


function mitem_visibility(make_visible) 
{
    // Do they want to change
    if (make_visible != null) 
    {
        // Yes
        // is the request stupid?     
	if (this.visible == make_visible) return (this.visible);

        // else change setting 
	this.visible = make_visible;
        // if it was a request to turn on	 
	if (make_visible)
        {
	    this.element.style.visibility = 'visible';
		this.element.parentNode.style.visibility = 'visible';
        } else {
            if (this.depth) 
            { 
                this.element.style.visibility = 'hidden';
				this.element.parentNode.style.visibility = 'hidden';
            }
        }
			
    }
    return (this.visible);
}

/////////////////////////////////////////////////////////////////////////////////////////////////////////
//
// Get a menu items x positon
//

function mitem_get_x() 
{
    var value = 0;
    for (var i = 0; i <= this.depth; i++)
    {
	value += this.container.pos['block_left'][i] + this.arrpath[i] * this.container.pos['left'][i];
    }
    return (value);
}

/////////////////////////////////////////////////////////////////////////////////////////////////////////
//
// Get a menu items y positon
//

function mitem_get_y() 
{
    var value = 0;
    for (var i = 0; i <= this.depth; i++)
    {
	value += this.container.pos['block_top'][i]+ this.arrpath[i] * this.container.pos['top'][i];
    }
    return (value);
}