/**
 * @author Cherry
 */
/* js enchanced functionality */

/* Noscipt - Quirksmode advises this usage to hide any noscript content with only
 * the smallest chance of non-dynamic content being displayed to the user
 * Hint: it has more of a chance of happening before the page is displayed than
 * ready()
 */
var W3CDOM = (document.getElementsByTagName && document.createElement);
if (W3CDOM) document.write('<link rel="stylesheet" href="noscript.css" />');


// For some reason I just prefer to run jQuery in no conflict mode
jQuery.noConflict();

jQuery(document).ready(function() {
	Hh.init();	
});

var Hh = {

	loadedImagesArray: null,
	imgArray: null,
	imgArrayString: null,
	overlay: null,
	
	init : function () {
		//Preload images
		Hh.listImages();			
		Hh.preloadImages();
		
		//Attach onload handler to the spacer image
		jQuery(loadedImagesArray[0]).load(function () {
			
			//Add the main image to the page
			jQuery(loadedImagesArray[0])
				.attr('id', 'main-image')
				.hide()
				.appendTo(jQuery('#image-container'))
				.fadeIn("slow");
			
			//Add the transparent image to the page
			/*jQuery(loadedImagesArray[1])
				.attr('id', 'transparent-image')
				.attr('usemap', '#Map')
				.appendTo(jQuery('#image-container'));*/
			
			
			//Create the overlay, hidden
			Hh.createOverlay();
			
			//Attach the hover handlers for all of the rollovers
			Hh.attachHoverHandlers();
			
		});
		
		
		
	},
	
	listImages : function () {
		imgArray = new Array();
		imgArray.push('index.jpg');
		imgArray.push('spacer.gif');
		imgArray.push('3things.gif');
		imgArray.push('3thingsheader.gif');
		imgArray.push('bite.gif');
		imgArray.push('busy.gif');
		imgArray.push('china.gif');
		imgArray.push('conservative.gif');
		imgArray.push('dell.gif');
		imgArray.push('ferrero.gif');
		imgArray.push('harrods.gif');
		imgArray.push('hhlogo.gif');
		imgArray.push('motorola.gif');
		imgArray.push('o2.gif');
		imgArray.push('sticking.gif');
		imgArray.push('unilever.gif');
		imgArray.push('adidas.gif');
		imgArray.push('emailcover.gif');
		
		
		imgArrayString = imgArray.toString();	
	},
	
    preloadImages: function(){
		loadedImagesArray = new Array();
		
		for (i = 0; i < imgArray.length; i++) {
			var image = jQuery(document.createElement('img')).attr('src', imgArray[i]);
			loadedImagesArray.push(image);
			jQuery(loadedImagesArray[i]).load(function(){
				jQuery(this).data('loaded', 'loaded');
			});
		}
		
	},
	
	createOverlay : function () {
		overlay = jQuery(document.createElement('div')).attr('class','overlay').css(
			{ 
			 	'position' : 'absolute',
		    	'left' : '0',
		    	'top' : '0',
				'height' : '749px',
				'width' : '1100px',
				'background-color' : '#000',
				'opacity' : '0',
				'z-index' : '1000'
			}
		).appendTo(jQuery('#image-container'));
	},
	
	attachHoverHandlers : function () {
		var areas = jQuery('area');
		for (var i = 0 ; i < areas.length ; i++) {
			if (jQuery(areas[i]).attr('class') != '') {
				
				if (jQuery(areas[i]).attr('class') == 'sticking') {
					Hh.hoverHandler(areas[i],0, 0);
				} else if (jQuery(areas[i]).attr('class') == '3things') {
					
					Hh.hoverHandler(areas[i],0, 0);
				} else {
					Hh.hoverHandler(areas[i],691, 31);
				}
				
			}
		}

	},
	
	fadeInImage : function (image, left, top) {
		jQuery(image).
		attr('class','rolloverimage').
		css(
			{
				'position' : 'absolute',
				'left' : left,
				'top' : top,
				'z-index' : '1000'
			}
		).hide().appendTo(jQuery('#image-container'))
		.fadeIn("fast");
					
	},
	
	getImageNumber : function (classname) {
		var found = -1;
		for (var i = 0 ; i < imgArray.length ; i++) {
			if (imgArray[i] == classname + ".gif") {
				found = i;				
			}			
		}
		return found;
		
	},
	
	hoverHandler :  function (el, left, top) {
		jQuery(el).hoverIntent(
			function () {
		
				var imgNumber = Hh.getImageNumber(jQuery(this).attr('class'));
				//Check image loaded
				if (jQuery(loadedImagesArray[imgNumber]).data('loaded') != 'loaded') {
					
					//if not, add a loading image (edge case)
					//and an onload handler to the image
					//to trigger the image coming in when it has loaded
					// also cancel any other of these handlers that have (edge edge case)
					// to any elements on the pagealready been added
					
				} else {
					//jQuery('area').unbind();
					//Hh.attachHoverHandlers();
					for( var queued in overlay.queue("fx")) {
						jQuery(overlay).stop();
					}
					jQuery(overlay).fadeTo('fast', 0.4);
					Hh.fadeInImage(loadedImagesArray[loadedImagesArray.length-1], 980, 700);
					Hh.fadeInImage(loadedImagesArray[imgNumber], left, top);
					jQuery(loadedImagesArray[imgNumber]).data('loaded','loaded');
					
				}
				
					
					
					//if it has then fade it in, dammit
				
		
				return false;
			}
			,
			
			function () {
				overlay.fadeTo("fast", 0);
				jQuery('.loadingimage').fadeOut("fast").remove();
							
				jQuery('.rolloverimage').each(function () {
					var imgNumber = Hh.getImageNumber( (jQuery(this).attr('src')).split('.')[0]);
					jQuery(this).fadeOut("fast").remove();	

					jQuery(loadedImagesArray[imgNumber]).data('loaded','loaded');
				}
				);
				
				return false;
			}
		); 	
	}
	
	


};