/**
 * Title IX: Interactive Homepage Component
 *
 * Copyright (c) 2007 Matthew Knight (http://www.reconstrukt.com)
 * for Title IX website
 *
 * @requires jQuery v1.2
 *
 */
jQuery(document).ready(function(){	
	var canvas 		= jQuery('#interactive-canvas')
 									.css({zIndex: 1, position: 'relative', width: '500px', height: '167px', overflow: 'hidden', background: "url('" + interactiveBgImagePath + "')"});
  jQuery('#interactive-canvas img').hide();
});

jQuery(window).load(function(){	
	var canvas 		= jQuery('#interactive-canvas');
	
	var pos 			= canvas.offset();	
	var panels	 	= new Array();
	var thumbs	 	= new Array();
	var mask 			= jQuery('<div />')
									.css({width: '500px', height: '167px', position: 'absolute', top: '168px', left: '0', zIndex: '800', background: '#990000'})
									.css('-moz-opacity', '.6')
									.css('opacity', '.6')
									.appendTo(canvas);
									
	// create a popup
	var popup	= jQuery('<div id="interactive-popup" />')
							.css({width: '220px', height: '167px', display: 'block', position: 'absolute', top: '1000px', left: '0', zIndex: '900'})
							.attr('contains', 'nothing')
							.extend({
								// conceal method hides the popup
								conceal : function(cb) {
									var p = this;
									p.attr('contains', 'nothing').fadeTo(200, .05, function(){
										p.css('top', '1000px');
										// mask.css({top: '167px'};
										// mask.animate({top: '167px'}, 100);
										if (cb) {
											cb();
										}
										return p;
									});
								},
								// reveal shows it
								reveal : function(cb) {
									var p   = this;
									var pos = p.offset();
									var btn = jQuery('<img src="' + interactiveShimImagePath + '" width="220" height="167" border="0" />')
														.css({position: 'absolute', top: '0', left: '0', zIndex: '850'})
														.appendTo(p)
														.mouseout(function(){
															jQuery(this).remove();
															p.conceal();															
														});
									
									// mask.css({top: '0'};
									// mask.animate({top: '0'}, 500);
								  p.css('top', '0px').fadeTo(300, 1);
									return p;
								}
							})
							.appendTo( canvas );
							
	// iterate thru our image metadata
	jQuery('#interactive div').each(function(i){
		
		// tack images to canvas; in order, left to right
		// determine positioning, as each image has unique X/Y coords
		var coords = {};
		switch(i + 1) {
			case 1 : 	coords = {left: '42px', top: '0px', popupLeft: '42px'};
								break;
			case 5 : 	coords = {left: '245px', top: '43px', popupLeft: '100px'};
								break;
			case 3 : 	coords = {left: '245px', top: '97px', popupLeft: '120px'};
								break;
			case 2 : 	coords = {left: '338px', top: '0px', popupLeft: '274px'};
								break;
			case 4 : 	coords = {left: '338px', top: '112px', popupLeft: '274px'};
								break;
			case 6 : 	coords = {left: '410px', top: '112px', popupLeft: '274px'};
								break;
		}
		
		// build a panel collection. a panel contains:
		//   large image	
		panels[i] = jQuery('<div id="interactive-panel-' + i + '" />')  		
								.css({width: '220px', height: '167px', position: 'absolute', top: '0', left: '0'})
								.html( jQuery('img.i-large', this) )
								.attr('popupLeft', coords.popupLeft);
		//   semi-transparent white div layer (fills lower 50% of image)
		//   ugh - freaking IE6
		var white_bg = jQuery('<div />').css({width: '220px', height: '65px', position: 'absolute', top: '102px', left: '0', background: '#ffffff'});
    
		panels[i].append( ((jQuery.browser.msie && jQuery.browser.version < 7) || jQuery.browser.safari) ? 
											 	white_bg :
												white_bg.fadeTo(10, 0.65) );
		//   text layer (in a container laid above the white div, padded 10px)
		panels[i].append(jQuery('<div />')
										 .css({width: '220px', height: '65px', position: 'absolute', top: '100px', left: '0', padding: '7px', color: '#333333'})
										 .html( jQuery('p', this).html() ));
    panels[i].targetLink = jQuery('a.i-link', this).attr('href');      
		// dupe the thumbnail image
		// add behaviors: on hover, fade in popup panel
	

		thumbs[i] = jQuery('img.i-small', this)
								.attr('id', 'thumbnail-' + i)
								.css({position: 'absolute', left: coords.left, top: coords.top, zIndex: 700})
								.hover(
									function(){
										// over
										if (popup.attr('contains') != i) {

											// stop any animations on the popup,
											// start a fresh conceal/reveal
											popup.stop().conceal(function(){
												// re-reveal
												popup.css( {left: panels[i].attr('popupLeft')} )
														 .html(panels[i])
														 .attr('contains', i)
														 .reveal()
														 .click(function() { document.location.href = panels[i].targetLink; });									
											});
										}
									}, 
									function(){
										// out
									}
								);

		// done. append & hide
		canvas.append( thumbs[i].hide() );
	});
		
	// reveal thumbs, linearly
  function fadeInThumbs(i) {    
    if (i < thumbs.length) {
      thumbs[i].fadeIn('normal', function() { fadeInThumbs(i + 1) });
    }
  }
  fadeInThumbs(0);
	
});