var Boxes = {
    init: function()
    {
    
    
           
    
    

		var divs = $$('div.box');
		
		for(var i =0; i< divs.length; i++)
		{
		    
			Event.observe(divs[i], 'mouseover', this.divhover.bind(divs[i]));
			Event.observe(divs[i], 'mouseout', this.divout.bind(divs[i]));
		}
    },
    
    divhover : function()
    {
    		
    		if( this.className == 'box leftBox')
    		{
    		    var parent = this.up();
    		    var grandparent = parent.up();
    		    grandparent.addClassName('boxHoverLeft');
    		   
    		}
    		else if ( this.className == 'box rightBox' && this.id == 'rightBox1')
    		{
    		    var leftBox1 = document.getElementById('leftBox1')
    		    var parent = leftBox1.up();
    		    var grandparent = parent.up();
    		    grandparent.addClassName('boxHoverRight');
    		    //this.addClassName('boxHover');
    		}
    		else if ( this.className == 'box rightBox' && this.id == 'rightBox2')
    		{
    		    var leftBox1 = document.getElementById('leftBox2')
    		    var parent = leftBox1.up();
    		    var grandparent = parent.up();
    		    grandparent.addClassName('boxHoverRight');
    		    //this.addClassName('boxHover');
    		}
    		else if (this.className =='box rightBox simpleBox' ||this.className == 'box leftBox simpleBox' || this.className == 'box simpleBox')
    		{
    		    this.className = this.className;
    		}
    		else 
    		this.addClassName('boxHover');
	},
	  
	   divout : function(e, div)
        {
    
    
    		this.removeClassName('boxHover');
    		var thisDiv ;
    		if(this.id=='rightBox1')
    		thisDiv = document.getElementById('leftBox1');
    		else if (this.id=='rightBox2')
    		thisDiv = document.getElementById('leftBox2');
    		else thisDiv = this;
    		    var parent = thisDiv.up();
    		    var grandparent = parent.up();
    		    grandparent.removeClassName('boxHoverLeft');
    		    grandparent.removeClassName('boxHoverRight');
    		
    		}
};
    
 


Event.observe(window, 'load', Boxes.init.bind(Boxes));