// JavaScript Document

var duration=0; // slide duration for first load is 0
var num_images = 0;
var loaded_images = 0;
var mouse_out = true;


var buttons = new Array("tour","breastcancer","stateoftheart","prostate","calendar");
var links = new Array("http://www.thefarbercenter.com/mission.php","http://www.thefarbercenter.com/cancers/breast.php","http://www.thefarbercenter.com/stateoftheart.php","http://www.thefarbercenter.com/cancers/prostate.php","http://www.thefarbercenter.com/events.php");

var textContent = new Array("See a virtual tour of the center and listen to what Dr. Farber has to say.","Have you just been diagnosed with breast cancer?<br />Learn what we can do for you.","Explore the most sophisticated equipment in NYC.","Have you just been diagnosed with prostate cancer?<br />Learn what we can do for you.","Our Events:<br />Doing our part in the fight against cancer. Come join us.");

jQuery.fn.onImagesLoaded = function(_cb) { 
  return this.each(function() {
 
    var $imgs = (this.tagName.toLowerCase()==='img')?$(this):$('img',this),
        _cont = this,
            i = 0,
    _done=function() {
      if( typeof _cb === 'function' ) _cb(_cont);
    };
 
    if( $imgs.length ) {
      $imgs.each(function() {
        var _img = this,
        _checki=function(e) {
          if((_img.complete) || (_img.readyState=='complete'&&e.type=='readystatechange') )
          {
            if( ++i===$imgs.length ) _done();
          }
          else if( _img.readyState === undefined ) // dont for IE
          {
            $(_img).attr('src',$(_img).attr('src')); // re-fire load event
          }
        }; // _checki \\
 
        $(_img).bind('load readystatechange', function(e){_checki(e);});
        _checki({type:'readystatechange'}); // bind to 'load' event...
      });
    } else _done();
  });
};



$(document).ready(function() {
		$('#home-slide').empty();
		var html_style = "#home-slide .slide-content { background: url(home-images/main-bg.jpg) no-repeat 0 0; height: 130px; width: 784px;padding-top: 336px; position: relative; } ";
		html_style += "#slide-thumbs li a { display: block; width: 79px height: 61px;}";
		html_style += "#slide-thumbs li a img { border: 0; display: none;}";
		html_style += "#slide-thumbs li { display: block; float: left;}";
		html_style += "#slide-thumbs ul { margin: 0; padding: 0;}";
		html_style += ".slide-bar { width: 0px; height: 128px; background: url(home-images/bar-bg.png) repeat-x; position: relative; margin-left: 26px; }";
		html_style += "#slide-thumbs { position: absolute; left: 296px; top: 336px; height: 68px; margin: 0px; padding: 3px 0 0 0; }";
		html_style += "h3.slide-title { background: url(home-images/slide-title.png) no-repeat; display: none; margin: 0px; padding: 0px; width: 169px; height: 43px; position: absolute; top: 14px; left: 54px;}";
		html_style += ".over-shade { background: url(home-images/over-bg.png); width: 784px; display: none; height: 463px; position: absolute; top: 0px; left: 0px; }";
		html_style += ".dotted { background: url(home-images/dotted.png) no-repeat 0 0; position: absolute; left: 78px; top: 194px; width: 175px; height: 140px; display: none; font-family: Arial; color: #FFF; font-size: 13px; line-height: 1.5em; padding-top: 24px; padding-left: 24px;}";
		html_style += ".over-content { display: none; position: absolute; top: 0px;}";
		html_style += ".over-content a { display: block; width: 114px; height: 104px; background-repeat: no-repeat;}";
		html_style += ".slide-label { display: none; position: absolute; bottom: 188px;  }";
		
		
		function startSlide() {
			$('body').append("<style>"+html_style+"</style>");
			
			var html_thumbs = "";
			for (var i=0;i<buttons.length;i++) {
				html_thumbs = html_thumbs + "<li><a href='"+links[i]+"' class='thumb-"+i+"'><img src='home-images/thumb-"+buttons[i]+".jpg' /></a></li>";	
			}
			
			$('#home-slide').fadeOut('slow').empty().hide().append("<div class='slide-content'><div class='over-shade'><!--over--></div><div class='dotted'></div><div class='slide-bar'><h3 class='slide-title'><span class='displace'>The State of the Art Center</span></h3></div><div id='slide-thumbs'><ul>" + html_thumbs + "<div class='clearBoth'><!--clear--></div></ul><div class='over-content'></div></div><div class='slide-label'></div></div>").fadeIn('1000', function() {
				$('.slide-bar').animate({ width: 735 }, 500, function() {
					var t_del = 50;
					$('h3.slide-title').fadeIn('fast');
					for (var i=0; i<buttons.length; i++) {
						t_del += 100;
	
						$('.thumb-'+i+' img').delay(t_del).fadeIn('400');	
						$('.thumb-'+i).bind('mouseenter', function() {
							$('.over-shade').fadeIn('500'); mouse_out = false; 
							var id = $(this).attr("class").replace("thumb-", "");
							$('.dotted').empty().append(textContent[id]);
							var over_position = $(this).position().left - 34;
							var label_position = $(this).position().left +260;
							$('.dotted').fadeIn('500');
							$('#slide-thumbs').css('height', 104);
							$('#slide-thumbs').css('top', 296);
							$('#slide-thumbs ul').css('marginTop', 40);
							$('.over-content').empty().append("<a href='"+links[id]+"' style='background: url(home-images/swatch-"+buttons[id]+".jpg)'></a>").css("marginLeft",over_position).show();
							$('.slide-label').empty().append("<img src='home-images/label-"+buttons[id]+".png' />").css("marginLeft",label_position).show();
							
						});
						
	
	
					}
					//$('#slide-thumbs').show();

					$('#slide-thumbs').bind('mouseleave', function() {
							
							
							$('.over-shade').fadeOut('500');
							$('.dotted').fadeOut('500');
							$('.over-content').empty().hide();
							$('.slide-label').empty().hide();
							
							$('#slide-thumbs').css('height', 68);
							$('#slide-thumbs').css('top', 336);
							$('#slide-thumbs ul').css('marginTop', 0);							
							
	
					});	
					
					/*	

					$('#slide-thumbs').bind('mouseenter', function() {
						
					});
					
					*/	
					
	
								
					
					
				});

			});
				
			
		}
		
		function checkLoaded() {
			loaded_images++;
			
			if (loaded_images == num_images-1) {
				startSlide();	
				//alert("images loaded: " + loaded_images)
			}
			//alert(loaded_images + " " + num_images);
		}
		
		(function($) {
		  var cache = [];
		  
		  // Arguments are image paths relative to the current page.
		  $.preLoadImages = function() {
			var args_len = num_images= arguments.length;
			for (var i = args_len; i--;) {
			  var cacheImage = document.createElement('img');
			  cacheImage.onload = function() { checkLoaded(); }
			  cacheImage.src = arguments[i];
			  cache.push(cacheImage);
			}
			
			
		  }
		})(jQuery)		
		
	
		
		jQuery.preLoadImages("home-images/main-bg.jpg", "home-images/thumb-tour.jpg", "home-images/thumb-breastcancer.jpg", "home-images/thumb-stateoftheart.jpg", "home-images/thumb-prostate.jpg", "home-images/thumb-calendar.jpg", "home-images/swatch-tour.jpg", "home-images/swatch-breastcancer.jpg", "home-images/swatch-stateoftheart.jpg", "home-images/swatch-prostate.jpg", "home-images/swatch-calendar.jpg","home-images/label-tour.png", "home-images/label-breastcancer.png", "home-images/label-stateoftheart.png", "home-images/label-prostate.png", "home-images/label-calendar.png", "home-images/dotted.png");
	

});