$(document).ready(function() {

	$("p.javaWarn").remove(); //remove the "YOU HAVE JAVA DISABLED" warning from the page (using Java!)

	//in the HTML, the 'Stills' submenu is nested INSIDE the 'main' menu.
	//this causes problems with IE (of course), so we need to use jQuery to edit the HTML
	var stillsMenu=$("ul.stillTypes").clone(); //store a copy of the 'Stills' menu
	$("ul.stillTypes").remove(); //delete the existing 'Stills' menu (the one inside the 'main' menu)
	$("#menu ul.main").after(stillsMenu); //write the 'Stills' menu back into the document immediately after the 'main' menu
	

	$('#menu ul li a:hover').css({'filter':'alpha(opacity:0)','-moz-opacity':'0','-khtml-opacity':'0','opacity':'0'});
	$('ul.stillTypes a').css({'filter':'alpha(opacity:100)','-moz-opacity':'1','-khtml-opacity':'1','opacity':'1'});
	$("ul.stillTypes").css({'filter':'alpha(opacity:90)','-moz-opacity':'.9','-khtml-opacity':'.9','opacity':'.9'}); //make submenu semi-transparent.  does not work in IE
	var menuLoc=$("#menu").offset();
	var menuHeight=$("#menu").height();
	var menuWidth=$("ul.main").width();
	var subWidth=$("ul.stillTypes").outerWidth();
	var subMenuLoc=menuLoc.top + menuHeight;
	var menuOffset=menuWidth-subWidth;
	$("ul.main").css({'position':'static'});
	$("ul.stillTypes").css({'top':subMenuLoc,'left':menuLoc.left+menuOffset-10+"px",'background':'#000','padding':'5px 5px','border-top':'1px solid #666'}).hide();
	$('li.fade a').hover(function() {
		$(this).animate({'opacity':'1'},500);
	},
	function() {
		$(this).animate({'opacity':'0'},500);
	});
	
	$("ul.main li.stills a").hover(function() { //fade in the 'stills' submenu when hovering over "Stills"
		$("ul.stillTypes").fadeIn('fast');
	},
	function() {
		//no mouse out action
	});
	
	$("#menu").hover(function() {
		//no hover in action
	}, 
	function() { //fade out the submenu when you leave #menu
		$("ul.stillTypes").fadeOut('fast');
	});	


	//to fade in the still images, we'll be doing the following:
	//-hide the <img> inside #movieScreen
	//-assign the src of that <img> to the background of #movieScreen
	//-when a thumbnail is clicked, do the following:
	//--assign the src of <img> the 'old' #movieScreen background
	//--make <img> visible
	//--assign the new image to #movieScreen background
	//--fade out <img>
	
	//image preloader
	var im = new Array(); //will store locations of all images to preload
	var preloader= new Array(); //will load the "images" themselves
	$(".stills .thumbnails a").each(function(i) {  //for each thumbnail...
		im[i]=$(this).attr('href');  //store the location of its corresponding large image
	});
	jQuery(im).each(function(k){  //for each element in 'im'
		preloader[k] = new Image(); //create new image object
		preloader[k].src = this;     //set the src of the image object to one of the large images, load
	});
	
	$(".stills #movieScreen img").hide();
	var firstIm=$("ul.thumbnails li a:first").attr('href');
	var oldIm=firstIm;
	$(".stills #movieScreen").css({"background":"url('"+firstIm+"') center center no-repeat"});
	$(".stills ul.thumbnails li a").click(function() { 
		var bigImage=$(this).attr("href");
		var desc=$(this).attr("title");
		$(".stills #movieScreen").css({"background":"url('"+bigImage+"') center center no-repeat"});
		$(".stills #movieScreen img").attr({"src":oldIm}).show().fadeOut(800);
		$(".stills p#description").hide().text(desc).fadeIn(500);
		oldIm=$(this).attr("href");
		
		$(".stills ul.thumbnails img").css({"border":'2px solid #aaa'});  //turn all thumbnail borders light gray
		$(this).children().css({'border':'2px solid #f1d913'});  //turn the clicked thumbnail the highlight color
		   				
		return false;  //disables the links' normal click behavior

	});
	
	$(".video p#description").css({'text-indent':'-1000em','overflow':'hidden'});
	
	
	$(".video .thumbnails a").hover(function() {
		$("p#description").text($(this).attr('title')).css({'text-indent':'0em','overflow':'visible'}).hide().fadeIn(200);
		$(this).children().css({'border':'2px solid #f1d913'});  //turn the clicked thumbnail the highlight color
	},
	
	function() {
		$("p#description").css({'text-indent':'-10000em','overflow':'hidden'});
		$(this).children().css({'border':'2px solid #aaa'});  //back to gray
	});
	

});