//Lets create a new class 
var modUpperMenu = new Class({
	
	//This function is called whenever a new item of the type modUpperMenu is created.
	//When creating an item using this class you can pass in values for any of the variables below
	//If you pass in a value it is used instead of the defaults listed below.
	initialize: function(myElements,options){
		options = Object.extend({
			onClick: Class.empty,
			start: 0,
			openSize: 0,
			smallSize: 0,
			itemSize: 0,
			selected: -1,
			open: -1,
			direction: '',
			stay: 1
		}, options || {});
		
		//Associate an internal variable - myElements with the fields which were passed in to us - also called myElements
		this.myElements = myElements;
		
		//Associate the options we recieved with our current object 
		this.options = options;
		
		//First lets check the cookie. If it exists, change the start option to match it.
		//The start option determines which of our items is open from the start.
  	if (Cookie.get("modUpperMenuOpen")&& options.stay) 
      		options.start = Cookie.get("modUpperMenuOpen");
    
    //Determine the normal size of our menu items by pulling it from the current layout
		options.itemSize = myElements[0].getStyle(options.direction).toInt();
		
		//Determine the small size (the size when another menu item is open) of our objects
		//We do this by finding the maximum length of our menu, subtracting the length of an open item from it,
		//and then dividing it by the number of visible items - 1. We subtract one because one item is open.
		options.smallSize = Math.round(((options.itemSize*myElements.length)-options.openSize)/(myElements.length-1));
		
		//Create a new fx variable to set the way our menu moves when the items expand and contract.
		var fx = new Fx.Elements(myElements, {wait: false, duration: 400, transition: Fx.Transitions.quadOut});
		
		//add event handlers to each of our items by looping through them 
		myElements.each(function(el, i){
			
      el.addEvent('mouseover', function(e){
        //stop any default events
			  e = new Event(e).stop();
			  el.show();
				if (options.stay)
				  el.select();
			});
			
			el.addEvent('mouseout', function(e){
			//stop any default events
				e = new Event(e).stop();
				if (!options.stay)
            el.hide();
			});
			
        			el.show = function(){
        			
        				var obj = {};
        				
               	
        				if (options.direction == 'height'){
        						    obj[i] = {'height': [el.getStyle('height').toInt(), options.openSize]};
        				} else {
                        obj[i] = {'width': [el.getStyle('width').toInt(), options.openSize]};
                }
        				
        				myElements.each(function(other, j){
        					if (other != el){
        						var w = other.getStyle(options.direction).toInt();
        						
        						if (options.direction == 'height'){
        						    if (w != options.smallSize) obj[j] = {'height': [w, options.smallSize]};
        						} else {
                        if (w != options.smallSize) obj[j] = {'width': [w, options.smallSize]};
                    }
        						
        					}
        				});
        				fx.start(obj);
        			};//el.show 
			
        			el.hide = function(){
        				var obj = {};
        				if(options.selected == -1){
        					myElements.each(function(el,i){
        							if (options.direction == 'height'){
              						    obj[i] = {'height': [el.getStyle('height').toInt(), options.itemSize]};
              				} else {
                              obj[i] = {'width': [el.getStyle('width').toInt(), options.itemSize]};
                      }
        					});
        				}else{
        					myElements.each(function(el,i){
        						if(i != options.selected){
        							var w = el.getStyle(options.direction).toInt();
        							
        							if (options.direction == 'height'){
          						    if (w != options.smallSize) obj[i] = {'height': [w, options.smallSize]};
          						} else {
                          if (w != options.smallSize) obj[i] = {'width': [w, options.smallSize]};
                      }
        						}else{
        						
              				if (options.direction == 'height'){
              						    obj[i] = {'height': [el.getStyle('height').toInt(), options.openSize]};
              				} else {
                              obj[i] = {'width': [el.getStyle('width').toInt(), options.openSize]};
                      }
        						
        						}
        					});
        				}
        				fx.start(obj);
        			};//el.hide
        			
        			el.select = function(){
        				options.selected = i;
        				Cookie.set("modUpperMenuOpen", i, {duration: 3600});
        			};//el.select
		});
		
		if(options.start != -1){
			myElements[options.start].show();
			myElements[options.start].select();
		}
	}
	
});