$(document).ready(function(){
	
	DD_belatedPNG.fix(".transparent");
	
	$("#slider").click(function(){
		if ($(this).hasClass("invisible")) {
			$("#slider").animate({width:"156px"});
			$(".backgroundSlider").animate({width:"132px"});
			$("#slider").removeClass("invisible");
			$(".veryNiceHideMeClass").show();
		} else {
			$("#slider").animate({width:"24px"});
			$(".backgroundSlider").animate({width:"0px"}, function(){$(".veryNiceHideMeClass").hide();});
			$("#slider").addClass("invisible");
		}
	});
	
	$("#thumbs li").click(function(){
		var me = $(this);
		$("#thumbs li.active").removeClass("active");
		me.addClass("active");
		swapImg( $("#imagePortfolio img"), me.children("a").attr("href"), me.children("a").attr("title") ); 
		if (me.hasClass("last")) {
			$("#next").css("color", "#929292");
		} else {
			$("#next").css("color", "#000000");
		}
		if (me.hasClass("first")) {
			$("#previous").css("color", "#929292");
		} else {
			$("#previous").css("color", "#000000");
		}
		return false;
	});

	$("#next").click(function(){
		var me = $("#thumbs li.active").next();
		if (me.html() != null) {
			$("#thumbs li.active").removeClass("active");
			me.addClass("active");
			swapImg( $("#imagePortfolio img"), me.children("a").attr("href"), me.children("a").attr("title") );
		}
		$("#previous").css("color", "#000000");
		if (me.hasClass("last")) {
			$("#next").css("color", "#929292");
		}
		return false;
	});

	$("#previous").click(function(){
		var me = $("#thumbs li.active").prev();
		if (me.html() != null) {
			$("#thumbs li.active").removeClass("active");
			me.addClass("active");
			swapImg( $("#imagePortfolio img"), me.children("a").attr("href"), me.children("a").attr("title") );
		}
		$("#next").css("color", "#000000");
		if (me.hasClass("first")) {
			$("#previous").css("color", "#929292");
		}
		return false;
	});	
	
	$(".expand").click(function(){
		var id = $(this).attr('id');
		$("."+id).slideToggle('fast');
		return false;
	});
	
    function swapImg( $img, src, alt ) {
        var actions = 2;
        var img = $('<img src="' + src + '" />').load( next );
        $img.fadeTo( 500, 0.0, next );
       
        function next() {
            if( --actions ) return;
            $img.attr({ src: src, alt: alt }).fadeTo( 500, 1.0 );
        }
    } 	
	
});