magRollover = {
	
	init: function(){
		//Create the popup (cheating by adding a hidden span in the tag)
		//Change .magazines to the container of the element you want to target the action on
		
		$(".magazines a").append("<span class='popup'></span>");
		$(".magazines a img").addClass("trigger");
		
		//Populate them with the img, link and promo
		
		$(function(){
			
			$('.mag').each(function(){
				
				var hoverLink = $(this).find("a.magazineLink");
				var hoverLinkHref = $(hoverLink).attr("href");
				/*TODO: Get larger image for popup*/ 
				var hoverImage = $(hoverLink).find("img").attr("src");
				var span = $(hoverLink).find("span")
				
				//set to use specific HTML from the exising img and href tags (this gets rid of all the other classes and crap we don't need
				span.html('<a href='+hoverLinkHref+'></a>');
				var spanHref = span.find("a") 
				spanHref.append('<img src='+hoverImage+'>');
				
				//If the mag has a promo definition list add the info into the popup.
				//Find the promo and get the HTML				
				var hoverPromo = $(this).find("dl.promo");
				var hoverHTML = hoverPromo.html();
				
				//Check to see if its found any promo data
				if (hoverHTML != null){
					//add the HTML to the popup
					span.append('<dl class="promo">'+hoverHTML+'</dl>');
				}
				
				// options
				var time = 200;
				var hideDelay = 100;
				
				var hideDelayTimer = null;
				var trigger = $('.trigger', hoverLink);
				var popup = $('.popup', hoverLink).css('opacity', 0);
				
				// set the mouseover and mouseout on each element
				$(hoverLink).mouseover(function(){
					// stops the hide event if we move from the trigger to the popup element
					if (hideDelayTimer) 
						clearTimeout(hideDelayTimer);
					
					// don't trigger the animation again if we're being shown, or already visible
					if (popup.is(':animated,:visible')) {
						return;
					}
					else {
						beingShown = true;
						
						// reset position of popup box
						popup.css({
							top: -17,
							left: -9,
							display: 'block' // brings the popup back in to view
						}) // (we're using chaining on the popup) now animate it's opacity and position
						.animate({
							opacity: 1
						}, time, 'easeInCubic', function(){
						});
					}
				}).mouseout(function(){
					// reset the timer if we get fired again - avoids double animations
					if (hideDelayTimer) 
						clearTimeout(hideDelayTimer);
					
					// store the timer so that it can be cleared in the mouseover if required
					hideDelayTimer = setTimeout(function(){
						hideDelayTimer = null;
						popup.animate({
							opacity: 0
						}, time, 'easeOutCubic', function(){
							// hide the popup entirely after the effect (opacity alone doesn't do the job)
							popup.css('display', 'none');
						});
					}, hideDelay);
				});
			});
		});
		//end
	}
}

WindowListener.add("load","magRollover.init()");