/********* HOVER STATES **********/

//adding support for mouseenter, mouseleave
/* MouseEnterLeave.js v1.0.0 by Ken Snyder: http://kendsnyder.com/sandbox/enterleave/ */
(function() {
  var events = Prototype.Browser.IE ?
    {"bindAsMouseEnter":"fromElement", "bindAsMouseLeave":"toElement"} :
    {"bindAsMouseEnter":"relatedTarget", "bindAsMouseLeave":"relatedTarget"};
  for (var eventName in events) {
    (function(relTargetProperty) {
      Function.prototype[eventName] = function() {
        var __method = this, args = $A(arguments), object = args.shift();
        return function(event) {
          event = event || window.event;
          try {
            var relatedTarget = $(event[relTargetProperty]);
            if (relatedTarget && relatedTarget != this && !relatedTarget.descendantOf(this)) {
              __method.apply(object, [Event.extend(event)].concat(args));
            }
          } catch(e) {/*console.log(e);*/}
        };
      };
    })(events[eventName]);
  }
})();



var homeHovers;
	
	HNHome = Class.create({
		
		initialize : function(container, nav_items, options)
		{
		
			this.atFront = 0;
			this.container = container;
			this.nav_items = nav_items;
			this.animating = false;
			this.infront = 0;
			this.imageContainers = this.container.childElements();
			this.images = container.select('img');
			this.options = Object.extend( {
				duration: 1
			}
	      , options || {
	         } );

		},
		start : function()
		{
			this.infront = 0;
			//console.log(this.imageContainers.first());
			//this.imageContainers.first().show();
			
			this.hideImages(this.imageContainers.without(this.imageContainers.first()));
			
			this.setHandlers(this.nav_items);

		},

		hideImages: function(imagesToHide)
		{
			imagesToHide.each(function(e){
				  e.down().setOpacity(0);
				  e.down().setStyle({visibility: 'visible'});
			});
		},
		// sets the size of the image to the browser window
		setSize: function(ele)
		{
			
			var dim = this.getPageDimensions();
			var pageWidth = dim.width;
			//get height of container
			var divHeight = ele.up().getHeight();
			
			//check ratios
			if((pageWidth/divHeight) < (ele.getWidth()/ele.getHeight()))
			{
				ele.setStyle({height:divHeight+'px'});
			}
			else
			{
				ele.setStyle({width: pageWidth+'px'});
			}
			

		},
		//resize the images on window resize
		refresh: function()
		{
			this.images.each(function(e){
				this.setSize(e);
			}.bind(this));
		},
		getPageDimensions : function()
		{
			return document.viewport.getDimensions();
		},
		// sets the hover functionality for the nav items
		setHandlers: function (nav_items)
		{
			var i = 0; 
			var _this = this;
			if(Prototype.Browser.IE)
			{
				nav_items.each(function(e)
				{
					e.down('ul').observe('mouseenter', this.showImage.bindAsEventListener(this, i));
					e.down('ul').observe('mouseleave', this.hoverOut.bindAsEventListener(this, i));
					i++;
				}.bind(this));
			}else
			{
				nav_items.each(function(e)
				{
					e.down('a').observe('mouseover', this.showImage.bindAsMouseEnter(this, i));
					e.observe('mouseout', this.hoverOut.bindAsMouseLeave(this, i));
					i++;
				}.bind(this));

			}
			
		},
		hoverOut: function(e)
		{
			var hoverLink = Event.element(e);
			var data = $A(arguments);
			this.showLinks();
		},
		showLinks: function()
		{
			  //show all the default link texts
			  this.nav_items.each(function(e){ e.removeClassName('over'); e.down('a').descendants().invoke('show'); });
		},
		showImage: function(e)
		{

			//data is the index of the hovered nav item
			var data = $A(arguments);
			  
			data.shift();
 
			var hoverLink = Event.element(e);

			this.showLinks();
				  
			hoverLink.up('.home_nav_link_container').addClassName('over');
				  
			//hide the current link text
			this.nav_items[data].down('a').descendants().each(function(e){e.hide();});
			//show the hover state for the current link
			this.nav_items[data].down('a span').show();
			this.nav_items[data].down('a span').descendants().each(function(e){e.show();});

			if(data.toString() != this.infront.toString())
			{
														   
                  var queue = Effect.Queues.get('photofade');

                  if(queue.size() >= 2)
                  {
                        queue.invoke('cancel');
                  }

				  var ele = this.imageContainers[data];

				//Add class name for dark images
				var divPage = hoverLink.up('.page');
				divPage.removeClassName('darkImgPage');

				if(ele.hasClassName('darkImg'))
				{
					divPage.addClassName('darkImgPage');
				}


                  new Effect.Fade(this.imageContainers[this.infront].down(), { duration: 0.2, afterFinish: function(){
                      this.moveToFront(ele);

                  }.bind(this),  queue: { position: 'end', scope: 'photofade' } });
                  
				  this.infront = data;

				  Effect.Appear(ele.down(), { from: 0.0, to: 1.0, duration: 0.4, afterFinish: function(){
					  this.hideImages(this.imageContainers.without(this.imageContainers[data]));
				  }.bind(this), queue: { position: 'end', scope: 'photofade' } });
			  }
			  

		},
		// move the current item to the front and the rest to the back
		moveToFront: function(ele)
		{
			  var _this = this;
			  
			  this.imageContainers.each(function(e){e.setStyle({zIndex: _this.imageContainers.size()-1});}.bind(this));
			  ele.setStyle({zIndex: this.imageContainers.size()});
			
		}

	});