var player;
$(window).load(function() {

		
		// 3. This function creates an <iframe> (and YouTube player)
		//    after the API code downloads.
	
	//splash page header image scroller
	if($('body').hasClass('home')){
		$('#main_header div[id!="logo"]').each(function(index, element){
			var dist = $(element).find('img').width();
			$(element).find('img').clone().appendTo(element).clone().appendTo(element).clone().appendTo(element);
			$(element).css('width', dist*4);
			var timer = Math.floor(Math.random()*35+10);
			if(index != 1){
				$(this).animate({marginLeft: -dist*3},10000*timer, 'linear', function(){
					$(this).animate({marginLeft: 0}, 10000*timer, 'linear');
				});
				
			}else{
				$(element).css('margin-left', -dist*3);
				$(element).animate({marginLeft: 0},10000*timer, 'linear', function(){
					$(this).animate({marginLeft: -dist*3}, 10000*timer, 'linear');
				});
			}
		});
		
		// youtube reveal and play
		$('#youtube img#youtube-poster').click(function(){
			$(this).delay(500).fadeOut(1000);
			player.playVideo();
		});
	}
	function end_video(){
		$('#youtube #youtube-poster').fadeIn(1000, function(){
			player.seekTo(0, false);
		});
	}
	
	
	//nav menu hover state
    $('#nav li[class!="home"]').hover(
        function () {
            //show its submenu
            $('ul', this).slideDown(100);
 
        },
        function () {
            //hide its submenu
            $('ul', this).slideUp(100);        
        }
    );


	//set boxes to absolute positions so we can control them
	if(!($('body').hasClass('about') || $('body').hasClass('home'))){
		var i = 1;
		var pos = '';
		$('div.box').each(function(index, el){
			var top = $(this).position().top;  
			var height = $(this).height();
			if(index < 3){
				reltop = top;
			}else{
				reltop = top + (parseInt((index)/3) * height); //alert(reltop);
			}
		
			switch(i){
				case 1: 
					$(this).addClass('left').css({position: 'absolute', left: '0', top: reltop+'px'});
					i++;
					break;
				case 2: 
					$(this).addClass('middle').css({position: 'absolute', right: '260px', top: reltop+'px'});
					i++;
					break;
				case 3: 
					$(this).addClass('right').css({position: 'absolute', right: '0', top: reltop+'px'});
					i = 1;
			}
		});
	}
	
	//capture click
	$('.growable').click(function(){
		$(this).find('div.box-hilite').remove();
		if($(this).hasClass('expanded')){
			if($('#box-panel').hasClass('tall')){
				$('#box-panel').removeClass('tall')
			}
			shrink($(this));
		}else{
			if(!$('#box-panel').hasClass('tall')){
				$('#box-panel').addClass('tall')
			}
			grow($(this));
		}
	});
	
	$('.growable').mouseenter(
		function(){
			if(!$(this).hasClass('expanded'))
			$(this).append('<div class="box-hilite"></div>');
	});
	$('.growable').mouseleave(
		function(){
			if(!$(this).hasClass('expanded'))
			$(this).find('div.box-hilite').remove();
		}
	);
	
	
	function grow(el){
		var callbackcount = 1;
		var sid = el.attr('id');
		var contents = panel_content[sid];
		if($('.expanded').length ){
			var oldel = $('.expanded');
			oldel.removeClass(contents.clss);
			oldel.children('img').fadeIn();
			oldel.children('div.copy').fadeOut().remove();
			el.addClass(contents.clss).addClass('expanded');
			el.append('<div class="copy"></div>').find('div.copy').hide().append('<img src="'+panel_content.imgpath+sid+'.png" /><div class="text"><h3>'+contents.title+'</h3><p>'+contents.text+'</p></div>');
			shuffle(oldel, 'close');
			oldel.removeClass('expanded').add(oldel.children('img')).animate({ width: '260', height: '193'}, 500, function(){
				if(callbackcount == 2){
					shuffle(el, 'open');
					var subcallcount = 1;
					$(el).add(el.children('img')).animate({ width: '520', height: '386'}, 500, function(){
						if(subcallcount == 2){
							el.children('img').fadeOut();
							el.find('div.copy').fadeIn();
						}
						subcallcount++;
					});
				}
				callbackcount++;
			});
		}else{
			el.addClass(contents.clss);
			var pos = el.position(); //alert('left: '+ pos.left+', top: '+pos.top);
			el.append('<div class="copy"></div>').find('div.copy').hide().append('<img src="'+panel_content.imgpath+sid+'.png" /><div class="text"><h3>'+contents.title+'</h3><p>'+contents.text+'</p></div>');
			shuffle(el, 'open');
			el.addClass('expanded').add(el.children('img')).animate({ width: '520', height: '386'}, 500, function(){
				if(callbackcount == 1){
					el.children('img').fadeOut();
					el.find('div.copy').fadeIn();
				}
				callbackcount++;
			});
			
		}
	}
	function shrink(el){
		var sid = el.attr('id');
		var contents = panel_content[sid];
		el.removeClass(contents.clss);
		el.children('img').fadeIn();
		el.children('div.copy').fadeOut().remove();
		el.removeClass('expanded').add(el.children('img')).animate({ width: '260', height: '193'}, 500, function(){
		});
		shuffle(el, 'close');
	}
	
	
	//move tiles around...
	function shuffle(el, how){
		if(how == 'open'){
			if(el.hasClass('left')){
				el.nextAll().each(function(index, element){//alert($(this).attr('id'));
					if(index == 0){
						$(this).css('right', '0');
					}else if(index == 1){
						$(this).css({right: '0',  top: (parseInt($(this).css('top')) + 193)});
					}else{
						//var top = $(this).css('top');
						$(this).css('top', (parseInt($(this).css('top')) + 193));
					}
				});
			}else if(el.hasClass('middle')){
				var top = el.css('top');
				el.removeAttr('style');
				el.css({position: 'absolute', top: top, left: 260});
				el.nextAll().each(function(index, element){//alert($(this).attr('id'));
					if(index == 0){
						$(this).css({right: 520, top: (parseInt($(this).css('top')) + 193)});
					}else{
						//var top = $(this).css('top');
						$(this).css('top', (parseInt($(this).css('top')) + 193));
					}
				});
			}else{
				el.prev().css({right: 520, top: (parseInt(el.css('top')) + 193)});
				el.nextAll().each(function(index, element){//alert($(this).attr('id'));
					$(this).css('top', (parseInt($(this).css('top')) + 193));
				});
			}
		}else{
			//Close open box
			if(el.hasClass('left')){
				el.nextAll().each(function(index, element){//alert($(this).attr('id'));
					if(index == 0){
						$(this).css('right', 260);
					}else if(index == 1){
						$(this).css({right: '0',  top: (parseInt(el.css('top')))});
					}else{
						//var top = $(this).css('top');
						$(this).css('top', (parseInt($(this).css('top')) - 193));
					}
				});
			}else if(el.hasClass('middle')){
				var top = el.css('top');
				el.removeAttr('style');
				el.css({position: 'absolute', top: top, right: 260});
				el.nextAll().each(function(index, element){//alert($(this).attr('id'));
					if(index == 0){
						$(this).css({right: 0, top: (parseInt($(this).css('top')) - 193)});
					}else{
						//var top = $(this).css('top');
						$(this).css('top', (parseInt($(this).css('top')) - 193));
					}
				});
			}else{
				el.prev().css({right: 260, top: (parseInt(el.css('top')))});
				el.nextAll().each(function(index, element){//alert($(this).attr('id'));
					$(this).css('top', (parseInt($(this).css('top')) - 193));
				});
			}
		}
	}
	
	
	//cycle images and handle mouseover on About page
	if ($('body').hasClass('about')){
		$('#s1').cycle({ 
		    fx:     'fade', 
		    speed:   500, 
		    timeout: 3000, 
		    pause:   1 
		});
		$('#s2').cycle({ 
		    fx:    'fade', 
			speed:   600, 
		    timeout: 1000,
		    pause:  2 
		});
		$('#s3').cycle({ 
		    fx:    'fade', 
			speed:   800, 
		    timeout: 4000,
		    pause:  6 

		});
		$('#s4').cycle({ 
		    fx:     'fade', 
		    speed:   400, 
		    timeout: 2000, 
		    pause:   4 
		});
		$('#s5').cycle({ 
		    fx:    'fade', 
			speed:   700, 
		    timeout: 5000,
		    pause:  7 
		});
		$('#s6').cycle({ 
		    fx:    'fade', 
			speed:   900, 
		    timeout: 3000,
		    pause:  2 

		});
		
		$('div.pics2 img.invis').hover(
			function(){
				$(this).fadeTo('fast', 0.8);
			},
			function(){
				$(this).fadeTo('fast', 0);
			}
		);
	}

});