// 'stacks' is the Stacks global object.
// All of the other Stacks related Javascript will 
// be attatched to it.
var stacks = {};


// this call to jQuery gives us access to the globaal
// jQuery object. 
// 'noConflict' removes the '$' variable.
// 'true' removes the 'jQuery' variable.
// removing these globals reduces conflicts with other 
// jQuery versions that might be running on this page.
stacks.jQuery = jQuery.noConflict(true);

// Javascript for stacks_in_24_page7
// ---------------------------------------------------------------------

// Each stack has its own object with its own namespace.  The name of
// that object is the same as the stack's id.
stacks.stacks_in_24_page7 = {};

// A closure is defined and assigned to the stack's object.  The object
// is also passed in as 'stack' which gives you a shorthand for referring
// to this object from elsewhere.
stacks.stacks_in_24_page7 = (function(stack) {

	// When jQuery is used it will be available as $ and jQuery but only
	// inside the closure.
	var jQuery = stacks.jQuery;
	var $ = jQuery;
	
//-- Gyro Stack v1.2 by Joe Workman --//

$(document).ready(function() {

	// Create the ribbon HTML
	createPager = function(){	
        $("#stacks_in_24_page7 .gyro_image_reel img").each(function(index) {
            $('<a href="#" rel="' + (index+1) + '">' + (index+1) + '</a>').appendTo('#stacks_in_24_page7 div.gyro_ribbon_middle');
        });
		// Need to swap the bragrounds when the ribbon is on the left
		if ('right' == 'left') {
			$('#stacks_in_24_page7 .gyro_ribbon_start').css("background", "url('rw_common/plugins/stacks/images/ribbon3/gyro_ribbon_right_end_3.png') no-repeat");
			$('#stacks_in_24_page7 .gyro_ribbon_end').css("background", "url('rw_common/plugins/stacks/images/ribbon3/gyro_ribbon_right_start_3.png') no-repeat");			
		}
		// This is to set some CSS styles for ribbons that don't  fit into the defaults set in the CSS file
		/* if ('3' == 2 || '3' == 3 || '3' == 4) {
			$('#stacks_in_24_page7 .gyro_ribbon').css("right", "-13px");
		}
		if ('3' == 5 || '3' == 6) {
			$('#stacks_in_24_page7 .gyro_ribbon_end').css("width", "32px");
		} */
	}; 
	createPager(); //Run function on launch

	//Set Default State of each portfolio piece
	// $("#stacks_in_24_page7 .gyro_ribbon").show();
	$("#stacks_in_24_page7 .gyro_ribbon a:first").addClass("active");

	//Get size of images, how many there are, then determin the size of the image reel.
	var imageHeight = $("#stacks_in_24_page7 .gyro_image_reel img:first").height();
	var imageWidth = $("#stacks_in_24_page7 .gyro_image_reel img:first").width();
	var imageSum = $("#stacks_in_24_page7 .gyro_image_reel img").size();
	var imageReelWidth = imageWidth * imageSum;
	
	//Adjust the image reel to its new size
	$("#stacks_in_24_page7 .gyro_container").css({'width' : imageWidth});
	$("#stacks_in_24_page7 .gyro_window").css({'width' : imageWidth});
	$("#stacks_in_24_page7 .gyro_window").css({'height' : imageHeight});
	$("#stacks_in_24_page7 .gyro_image_reel").css({'width' : imageReelWidth});
			
	//ribbon + Slider Function
	rotate = function(){	
		var triggerID = $active.attr("rel") - 1; //Get number of times to slide
		var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

		$("#stacks_in_24_page7 .gyro_ribbon a").removeClass('active'); //Remove all active class
		$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
		
		//Slider Animation
		$("#stacks_in_24_page7 .gyro_image_reel").animate({ 
			left: -image_reelPosition
		}, 1000 );		
	}; 
	
	var play;
	//Rotation + Timing Event
	rotateSwitch = function(){		
		play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
			$active = $('#stacks_in_24_page7 .gyro_ribbon a.active').next();
			if ( $active.length === 0) { //If ribbon reaches the end...
				$active = $('#stacks_in_24_page7 .gyro_ribbon a:first'); //go back to first
			}
			rotate(); //Trigger the ribbon and slider function
		}, 5000); //Timer speed in milliseconds
	};
	rotateSwitch(); //Run function on launch
	
	//On Hover
	$("#stacks_in_24_page7 .gyro_image_reel a").hover(function() {
		clearInterval(play); //Stop the rotation
	}, function() {
		rotateSwitch(); //Resume rotation
	});	

	//On Click
	$("#stacks_in_24_page7 .gyro_ribbon a").click(function() {	
		$active = $(this); //Activate the clicked ribbon
		//Reset Timer
		clearInterval(play); //Stop the rotation
		rotate(); //Trigger rotation immediately
		if (false) {
			clearInterval(play); //Stop the rotation
		}
		else {
			rotateSwitch(); // Resume rotation
		}
		return false; //Prevent browser jump to link anchor
	});	
});

//-- End Gyro Stack --//
	return stack;
})(stacks.stacks_in_24_page7);


// Javascript for stacks_in_101_page7
// ---------------------------------------------------------------------

// Each stack has its own object with its own namespace.  The name of
// that object is the same as the stack's id.
stacks.stacks_in_101_page7 = {};

// A closure is defined and assigned to the stack's object.  The object
// is also passed in as 'stack' which gives you a shorthand for referring
// to this object from elsewhere.
stacks.stacks_in_101_page7 = (function(stack) {

	// When jQuery is used it will be available as $ and jQuery but only
	// inside the closure.
	var jQuery = stacks.jQuery;
	var $ = jQuery;
	

// xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
// FADER STACK BY http://www.doobox.co.uk XXXXXXXX
// V-1.0.3 LAST UPDATED 24/3/2011 XXXXXXXXXXXXXXXX
// COPYRIGHT@2010 MR JG SIMPSON, TRADING AS DOOBOX
// ALL RIGHTS RESERVED XXXXXXXXXXXXXXXXXXXXXXXXXXX
// xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx


$(document).ready(function() {
$("#stacks_in_101_page7 img").removeClass("imageStyle").addClass('dooFaderImage');
	
	// get the main background image if one exists
	var bgimage = $('.stacks_in_101_page7background img').attr("src");


	// create the image array from the images the user has dropped in to the slides
    var FArray = $.makeArray($('.stacks_in_101_page7faderImageContainer img'));
    	$(FArray).hide();
	
	// set initial global variables
	var doowidth = 0;
	var dooheight = 0;
    var dooi = 0;
    var doox = 0;
    var dooy = 0;
    var stacks_in_101_page7total = FArray.length - 1;
    var stacks_in_101_page7delay = 1;
    var doofaderborder = 0 + "px solid #CCCCCC"
    var dootopmargin = 0;
    var dooleftmargin = 0;
    
    // xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    // get the size of the highest image in px
    // xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    var dooheight = 0;
    $.each(FArray, function(index, height) {
    if($(height).height() > dooheight){
    dooheight = $(height).height();
    }
	});
	dooheight = dooheight +"px"; // add the px for ie
	
	
	
	// xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
	// get the size of the widest image in px
	// xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    var doowidth = 0;
    $.each(FArray, function(index, width) {
    if($(width).width() > doowidth){
    doowidth = $(width).width();
    }
	});
	doowidth = doowidth + "px"; // add the px for ie
	
	
	 // remove the initial image container and images from the page(not needed)
    $('.stacks_in_101_page7faderImageContainer img').remove();
	

    // place the first slide right away, before the effect starts
    $(FArray[0]).appendTo(".stacks_in_101_page7faderbox").show();
    
 
    
    // xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    // setup the initial css for the faderbox
    // xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    if("yes" == "yes"){
		$(".stacks_in_101_page7faderbox").css("backgroundColor", "#F4F4F4");
	  }

   $(".stacks_in_101_page7faderbox").css({
    "background-image": "url("+bgimage+")",
    "padding":          "0px",
    "height":           dooheight + '',
    "width":            doowidth + '',
    "border":           doofaderborder + ''
});

   	 
   	 

    
    
	// xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    // The Main Fader Infinite Function XXXXX
    // xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    function rotateFader(){
    $("#stacks_in_101_page7 img").removeClass("imageStyle").addClass('dooFaderImage');
    
    // set up vars for negative centering margins (only applies if centering set in the hud to true)
    if("yes" == "yes"){
    dootopmargin = $(FArray[dooi]).height() / 2;
    dooleftmargin = $(FArray[dooi]).width() / 2;
    dootopmargin = "-" + Math.round(dootopmargin) + "px";
	dooleftmargin = "-" + Math.round(dooleftmargin) + "px";

    
    // take care of the css for each image as the images rotate (only applies if centering set in the hud to true)
    $(FArray[dooi]).css({
    	"position": "absolute",
    	"top": "50%" ,
    	"left": "50%",
    	"marginTop": dootopmargin,
    	"marginLeft": dooleftmargin
    });
    }
    
    
    
    
			$(FArray[dooi]).appendTo(".stacks_in_101_page7faderbox").delay(stacks_in_101_page7delay).fadeIn(1000, function() {
			

			
       	 		$(FArray[dooi]).delay(1000).fadeOut(1000, function() {
       	 		
       	 		// do something in a future upgrade, when fade out has ended.
     		 	});
     		 	
     			 if(dooi < stacks_in_101_page7total){dooi = dooi + 1;}
        		 else{dooi = 0;}
        		 stacks_in_101_page7delay = 1000;
        		 
        		
        		 rotateFader();
        		 
        		 
      		});
    // set up vars for negative centering margins (only applies if centering set in the hud to true)
    if("yes" == "yes"){
    dootopmargin = $(FArray[dooi]).height() / 2;
    dooleftmargin = $(FArray[dooi]).width() / 2;
    dootopmargin = "-" + Math.round(dootopmargin) + "px";
	dooleftmargin = "-" + Math.round(dooleftmargin) + "px";

    
    // take care of the css for each image as the images rotate (only applies if centering set in the hud to true)
    $(FArray[dooi]).css({
    	"position": "absolute",
    	"top": "50%" ,
    	"left": "50%",
    	"marginTop": dootopmargin,
    	"marginLeft": dooleftmargin
    });
    }
    
	}
	
	// initialize the fader function and rotate the images
    rotateFader();
    
});


// xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
// END DOOBOX FADER STACK XXXXXXXXXXXXXXXXXXXXX
// xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
	return stack;
})(stacks.stacks_in_101_page7);