(function($) {

    $.groupShowCase = function() {
		$elems = jQuery.makeArray($(".showCase"));

		$('.showCaseContainer div.showCase').css({opacity: 0.0});
		$('.showCaseContainer div:first-child').css({opacity: 1.0}).addClass("show");
		$('.showCaseContainer div:first-child div').css({top: 0});
		
		$current = ($('.showCaseContainer div.show') ?  $('.showCaseContainer div.show') : $('.showCaseContainer div:first')); //??????
		
		$('<div />').attr("class", "showCasePaging").appendTo(".showCaseWrapper");
		$(".showCase").each(function(i){
			var current = i + 1;
			$('<a />').attr("href", "#").attr("rel", current).text(current).appendTo(".showCasePaging")
		});
        $(".showCasePaging a:first-child").addClass("active");

        //Paging + Slider Function
        rotate = function() {
            $(".showCasePaging a").removeClass('active'); //Remove all active class
            $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
			
			$current = ($('.showCaseContainer div.show') ?  $('.showCaseContainer div.show') : $('.showCaseContainer div:first'));
			$current.find('div').animate({top: '250px'}, {queue: true,  duration:300 });	
			$current.removeClass('show').animate({opacity: 0}, { queue: true, duration:1000 });
			
			$next = $($elems[$active.attr("rel")-1]);
			//alert($next.find("img").attr("src"));
			//$(".showCaseOuterContainer").css({"background-image":"url(" + $next.find("img").attr("src") + ")", "background-repeat":"repeat-x", backgroundPosition:"center 0px" }).animate({backgroundPosition:"center 250px"}, { queue: true, duration:1000 });
			//$(".showCaseOuterContainer").css( {backgroundPosition: "-20px 35px"}).animate({backgroundPosition: '(150px 250px)'});
			$next.addClass('show').animate({opacity: 1.0}, { queue: true, duration:1000 });
			$next.find('div').animate({top: '0'}, { queue: true, duration:500 });
        };

        //Rotation + Timing Event
        rotateSwitch = function() {
            play = setInterval(function() { //Set timer - this will repeat itself every 3 seconds
                $active = $('.showCasePaging a.active').next();
                if ($active.length === 0) { //If paging reaches the end...
                    $active = $('.showCasePaging a:first-child'); //go back to first
                }
				rotate(); //Trigger the paging and slider function
            }, 6000); //Timer speed in milliseconds (3 seconds)
        };

        rotateSwitch(); //Run function on launch

        //On Hover
        $(".showCase").hover(function() {
            clearInterval(play); //Stop the rotation
        }, function() {
            rotateSwitch(); //Resume rotation
        });

        //On Click
        $(".showCasePaging a").click(function() {
			if(typeof $active != 'undefined'){
				if($active.attr("rel") == $(this).attr("rel")) { return false; }
			}
            $active = $(this); //Activate the clicked paging
			//Reset Timer
            clearInterval(play); //Stop the rotation
            rotate(); //Trigger rotation immediately
            rotateSwitch(); // Resume rotation
            return false; //Prevent browser jump to link anchor
        });
    };

})(jQuery)