$(window).bind('load', function() {
    var preload = new Array();
    $('.hover').each(function() {
        s = $(this).attr("src").replace(/_off\.(.+)$/i, '_on.$1');
        preload.push(s)
    });
    var img = document.createElement('img');
    $(img).bind('load', function() {
        if(preload[0]) {
            this.src = preload.shift();
        }
    }).trigger('load');
});

$(document).ready(function() {
		jQuery.ifixpng('js/pixel.gif');
		jQuery('img[src$=png]').ifixpng();
		

    /* general hovers */
    $('.hover').each(function() {
        if ($(this).attr("src").match(/_on\.(.+)$/i)) {
            $(this).removeClass("hover");
        }
    });
    $('.hover').hover(function() {
        s = $(this).attr("src").replace(/_off\.(.+)$/i, "_on.$1");
        $(this).attr("src", s);
    }, function() {
        s = $(this).attr("src").replace(/_on\.(.+)$/i, "_off.$1");
        $(this).attr("src", s);
    });
		// EXTERNAL LINKS
		$('a.external, a.download-pdf').attr('target','_blank');
	
		if($('#gallery-nav').length > 0){
			$('#gallery-nav li a').click( function() { 
				$('#gallery-nav li').removeClass('selected');
				$(this).parent('li').addClass('selected');
				showGalleryImage( $(this).attr('href'),$(this).attr('title') );
				return false;
			});
		}
		if($('#page-menu').length > 0)	slidemenu('#page-menu', 25, 15, 150, .6);
	
		if($('#slideshow').length > 0)	initSlideShow();
/*
		$(".teaser").hover(function() {
        s = $(this).attr("src").replace(/_off\.(.+)$/i, "_on.$1");
        $(this).attr("src", s);
    }, function() {
        s = $(this).attr("src").replace(/_on\.(.+)$/i, "_off.$1");
        $(this).attr("src", s);
    });
*/		
});

function initSlideShow() {

	//Set the opacity of all images to 0
	$('#slideshow a').css({opacity: 0.0});
	
	//Get the first image and display it (set it to full opacity)
	$('#slideshow a:first').css({opacity: 1.0});
	
	//Set the caption background to semi-transparent
	$('#slideshow .caption').css({opacity: 0.7});

	//Resize the width of the caption according to the image width
	$('#slideshow .caption').css({width: $('#slideshow a').find('img').css('width')});
	
	//Get the caption of the first image from REL attribute and display it
	var caption = $('#slideshow a:first').find('img').attr('rel');
	if(caption.length > 0){
		$('#slideshow .content').html(caption).animate({opacity: 0.7}, 400);
	}else{
		$('#slideshow .caption').css({'opacity':'0','height':'1px'})
	}
	//Call the slideshow function to run the slideshow, 6000 = change to next image after 6 seconds
	setInterval('slideShow()',6000);
	
	
}

function slideShow() {
	
	//if no IMGs have the show class, grab the first image
	var current = ($('#slideshow a.show')?  $('#slideshow a.show') : $('#slideshow a:first'));

	//Get next image, if it reached the end of the slideshow, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#slideshow a:first') :current.next()) : $('#slideshow a:first'));	
	
	//Get next image caption
	var caption = next.find('img').attr('rel');	
	
	//Set the fade in effect for the next image, show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);

	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
	
	//Set the opacity to 0 and height to 1px
	//$('#slideshow .caption').animate({opacity: 0.0}, { queue:false, duration:50 }).animate({height: '1px'}, { queue:true, duration:300 });	//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
	//$('#slideshow .caption').animate({opacity: 0.7},100 ).animate({height: '60px'},500 );
	if(caption.length > 0){
		/*
		$('#slideshow .caption').animate({opacity: 0.0}, { queue:false, duration:50 }).animate({height: '1px'}, { queue:true, duration:300 }).animate({opacity: 0.7},100 ).animate({height: '60px'},500 );
		//Display the content
		$('#slideshow .content').html(caption);
		*/
		$('#slideshow .caption .content')
		.css({opacity: 0.0})
		.html(caption)
		.animate({opacity: 1.0},1000 );
		//Display the content
		//$('#slideshow .content').html(caption);
	}else{
		//$('#slideshow .caption').animate({opacity: 0.0}, { queue:false, duration:50 }).animate({height: '1px'}, { queue:true, duration:300 });
		$('#slideshow .caption').css({opacity: 0.0});
	}
}
function showGalleryImage(src,ttl){
	$('#gallery img').fadeOut('fast').remove();
	$("#gallery-caption").hide().empty();
	
	var largeImage = new Image();
	$(largeImage).attr({'src': src}).load(function(){
	
		$(largeImage).hide();
		$('#gallery').append(largeImage);
		$(largeImage).fadeIn('normal'); 
		$('#gallery-caption').html(ttl).fadeIn("normal");  
	});
}

function slidemenu(navigation_id, pad_out, pad_in, time, multiplier)
{
	// creates the target paths
	//var list_elements = navigation_id + " li.sliding-element";
	var list_elements = navigation_id + " li";
	var link_elements = list_elements + " a";
	
	// initiates the timer used for the sliding animation
	var timer = 0;
	
	// creates the slide animation for all list elements 
	$(list_elements).each(function(i)
	{
		// margin left = - ([width of element] + [total vertical padding of element])
		$(this).css("margin-left","-180px");
		// updates timer
		timer = (timer*multiplier + time);
		$(this).animate({ marginLeft: "0" }, timer);
		$(this).animate({ marginLeft: "15px" }, timer);
		$(this).animate({ marginLeft: "0" }, timer);
	});

	// creates the hover-slide effect for all link elements 		
	$(link_elements).each(function(i)
	{
		$(this).hover(
		function()
		{
			$(this).animate({ paddingLeft: pad_out }, 150);
		},		
		function()
		{
			$(this).animate({ paddingLeft: pad_in }, 150);
		});
	});
}