/*** TOP SLIDESHOW ***/
function slideshow() {
	var $active = $("#slideshow .active");
	var $next = ($("#slideshow .active").next().length > 0) ? $("#slideshow .active").next() : $("#slideshow img:first");
	$active.fadeOut(function(){
		$active.removeClass("active");
		$next.fadeIn().addClass("active");
	});
}

$.ajaxSetup({cache:false});

/*** AJAX PAGE LOAD FOR THE WORK PAGE ***/
function ajax(loader1,selector1,source1,param1,loader2,selector2,source2,param2){
	$(selector1).animate({opacity:0.1}, function(){
		$('#changeme1').css({'cursor':'default'});
		$(loader1).animate({opacity:1});
		$(selector1).load(source1,param1, function(){
			$('.topcellbg').animate({height:500});
			$('.topbgcontainer.work').css({height:500});
			$(loader1).animate({opacity:0});
			$(selector1).animate({opacity:1});
		});
	});
	
	$(selector2).animate({opacity:0.1}, function(){
		$(loader2).animate({opacity:1});
		$(selector2).load(source2,param2, function(){
			$(loader2).animate({opacity:0});
			$(selector2).animate({opacity:1});
		});
	});
};

jQuery(document).ready(function($){ //fire on DOM ready

	/************* SCROLL TO TOP ANIMATION FOR THE WORK PAGE *************/
	$('a.top').click(function () {
		$('body,html').animate({
			scrollTop: 0
		}, 500);
		return false;
	});
	
	/************* ENABLE THE CSS IMAGE PRELOAD FOR THE WORK PAGE *************/
	$.preloadCssImages();
	
	/*************** ENABLE THE TOP SLIDESHOW FOR THE WORK PAGE ***************/
	$("#slideshow img:first").addClass("active");
	setInterval("slideshow()", 5000);
   
	/************* ENABLE THE IMAGE GALLERY FOR THE WORK PAGE *************/
	$('.menu li').click(function() {
		$('.menu li').removeClass('selected');
		$('.menu li').addClass('selected_off');
		$(this).removeClass('selected_off');
		$(this).addClass('selected');
		
		thisItem 	= $(this).attr('rel');
		if(thisItem != "all") {
			$('.item li[rel='+thisItem+']')
			.animate({'opacity' : 1,
				'width' : '184px',
				//'height' : '100px', 
				'marginRight' : '5px' 
			});
			$('.item li[rel!='+thisItem+']')
			.animate({'opacity' : 0,
				'width' : '0px',
				//'height' : 0,
				'marginRight' : 0 
			});
		} else {
			$('.item li')
			.animate({'opacity' : 1,
				'width' : '184px',
				//'height' : '100px', 
				'marginRight' : '5px' 
			});
		}
	})
	
	// create our transition as a plugin
	$.fn.crossfade = function () {
		return this.each(function () { 
			// cache the copy of jQuery(this) - the start image
			var $$ = $(this);
			
			// get the target from the backgroundImage + regexp
			var target = $$.attr('rel');
			
			// wrap img element
			$$.wrap('<div style="margin-bottom:-15px;"></div>')
			// change selector to parent - i.e. newly created span
			.parent()
			// prepend a new image inside the span
			.prepend('<img>')
			// change the selector to the newly created image
			.find(':first-child')
			// set the image to the target
			.attr('src', target);
			
			// position the grey image
			$$.css({
				'z-index' : 99,
				'margin-top' : '-100px'
			});
			
			// note: the above CSS change requires different handling for Opera and Safari,
			// see the full plugin for this.
			
			// similar effect as single image technique, except using .animate 
			// which will handle the fading up from the right opacity for us
			$$.hover(function () {
				$$.stop().animate({
					'opacity' : 0
				}, 250);
			}, function () {
				$$.stop().animate({
					'opacity' : 1
				}, 250);
			});
		});
	};
	
	$(window).bind('load', function () {
		$('.item li img').crossfade();
	});
});