// '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_54_page4
// ---------------------------------------------------------------------

// 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_54_page4 = {};

// 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_54_page4 = (function(stack) {

	// When jQuery is used it will be available as $ and jQuery but only
	// inside the closure.
	var jQuery = stacks.jQuery;
	var $ = jQuery;
	
//(function (jsp) {
//jsp.topZIndex = function (selector) {
//        return Math.max(0, Math.max.apply(null, jsp.map(jsp(selector || ".SPactive *"), 
//                function (v) {
//                        return parseInt(jsp(v).css("z-index")) || null;
//                }
//        )));
//};

//jsp.fn.topZIndex = function (opt) {
//        if (this.length === 0) {
//                return this;
//        }
//        opt = jsp.extend({increment: 1, selector: ".SPactive *"}, opt);
//        var zmax = jsp.topZIndex(opt.selector), inc = opt.increment;
//        return this.each(function () {
//                jsp(this).css("z-index", zmax += inc);
//        });
//};
//})(jQuery);

var jsp = jQuery.noConflict();
(function (jQuery) {
	jsp.fn.SPbutton_stacks_in_54_page4 = function (options) 
	{
			jsp(this).html('<div id="SPbutton_stacks_in_54_page4"></div><div id="SPBlock_stacks_in_54_page4"></div>');
			//jsp(this).addClass('SPactive');
			jsp('div#SPbutton_stacks_in_54_page4').toggle(function () 
			{
			//
			//closePanels();
						
			//jsp("#SPBlock_stacks_in_54_page4").topZIndex( { increment: 5 } );
			//jsp("#SPbutton_stacks_in_54_page4").topZIndex( { increment: 5 } );
			jsp(this).animate({"marginLeft": "-=3px"},"fast");
			jsp('#SPBlock_stacks_in_54_page4').animate({"marginLeft": "-=0px"},"fast");
			jsp(this).animate({"marginLeft": "+=300px"},"slow");
			jsp('#SPBlock_stacks_in_54_page4').animate({"marginLeft": "+=300px"},"slow");
						
			// Make active
			//jsp(this).addClass('activeslp');
		},
		function () 
		{
			jsp('#SPBlock_stacks_in_54_page4').animate({"marginLeft": "-=300px"},"slow");
			jsp(this).animate({"marginLeft": "-=300px"},"slow").animate({"marginLeft": "+=3px"},"fast");

			// active
			//jsp(this).removeClass('activeslp');
		});//toggle
	}
})(jQuery);

	jQuery(function(){
		jsp('body').append('<div id="SlidingPanel_stacks_in_54_page4"></div>');
		jsp('#SlidingPanel_stacks_in_54_page4').SPbutton_stacks_in_54_page4();
		jsp('#SPBlock_stacks_in_54_page4').html( jsp('#SlidingPanelContent_stacks_in_54_page4').html() );
		jsp('#SPbutton_stacks_in_54_page4').html( jsp('#button_stacks_in_54_page4').html() );
		jsp('#SlidingPanelContent_stacks_in_54_page4').remove();
		jsp('#button_stacks_in_54_page4').remove(); 
	});
	
//	function closePanels() {
//		jsp("div[id^='SPbutton']").each(function(){
//			if( jsp(this).hasClass('activeslp') )
//			{
//				jsp(this).click();
//			}
//		});
//	}
	return stack;
})(stacks.stacks_in_54_page4);


// Javascript for stacks_in_69_page4
// ---------------------------------------------------------------------

// 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_69_page4 = {};

// 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_69_page4 = (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_69_page4 .gyro_image_reel img").each(function(index) {
            $('<a href="#" rel="' + (index+1) + '">' + (index+1) + '</a>').appendTo('#stacks_in_69_page4 div.gyro_ribbon_middle');
        });
		// Need to swap the bragrounds when the ribbon is on the left
		if ('right' == 'left') {
			$('#stacks_in_69_page4 .gyro_ribbon_start').css("background", "url('index_files/images/ribbon0/gyro_ribbon_right_end_0.png') no-repeat");
			$('#stacks_in_69_page4 .gyro_ribbon_end').css("background", "url('index_files/images/ribbon0/gyro_ribbon_right_start_0.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 ('0' == 2 || '0' == 3 || '0' == 4) {
			$('#stacks_in_69_page4 .gyro_ribbon').css("right", "-13px");
		}
		if ('0' == 5 || '0' == 6) {
			$('#stacks_in_69_page4 .gyro_ribbon_end').css("width", "32px");
		} */
	}; 
	createPager(); //Run function on launch

	//Set Default State of each portfolio piece
	 $("#stacks_in_69_page4 .gyro_ribbon").show();
	$("#stacks_in_69_page4 .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_69_page4 .gyro_image_reel img:first").height();
	var imageWidth = $("#stacks_in_69_page4 .gyro_image_reel img:first").width();
	var imageSum = $("#stacks_in_69_page4 .gyro_image_reel img").size();
	var imageReelWidth = imageWidth * imageSum;
	
	//Adjust the image reel to its new size
	$("#stacks_in_69_page4 .gyro_container").css({'width' : imageWidth});
	$("#stacks_in_69_page4 .gyro_window").css({'width' : imageWidth});
	$("#stacks_in_69_page4 .gyro_window").css({'height' : imageHeight});
	$("#stacks_in_69_page4 .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_69_page4 .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_69_page4 .gyro_image_reel").animate({ 
			left: -image_reelPosition
		}, 1396 );		
	}; 
	
	var play;
	//Rotation + Timing Event
	rotateSwitch = function(){		
		play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
			$active = $('#stacks_in_69_page4 .gyro_ribbon a.active').next();
			if ( $active.length === 0) { //If ribbon reaches the end...
				$active = $('#stacks_in_69_page4 .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_69_page4 .gyro_image_reel a").hover(function() {
		clearInterval(play); //Stop the rotation
	}, function() {
		rotateSwitch(); //Resume rotation
	});	

	//On Click
	$("#stacks_in_69_page4 .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_69_page4);