$(document).ready(function() {
		
		var startDelay = 5000; // Time in m/sec
		var intervalDelay = 5000; // Time in m/sec
		
		// What are we displaying 1st
		$("#right-column #productDetail-0").css({display: "block"}).fadeTo("slow", 1);
		
		// Set timeout	
		var timeout = setTimeout(function() {

			var i = 1;
			
			// Run accordion after timeout
			$('#accordion .container:nth-child(' + i + ') h3').trigger('click');
			$("#accordion a").click(function() { clearInterval(interval); } );
			
			i++;
			
			// Set interval
			var interval = setInterval(function() {
				
				// Clear interval if user clicks accordion link
				$("#accordion a").click(function() { clearInterval(interval); } );
				
				// Tigger accordion event
				$('#accordion .container:nth-child(' + i + ') h3').trigger('click');
				
				// check counter
				if(i == $("#accordion .container").length) { i = 1; } else { i++; } 

			}, intervalDelay);
			
		}, startDelay);
		
		// Clear Timeout if the use clicks a accordion link
		$("#accordion a").click(function() { clearTimeout(timeout); } );
						
		// Product Type Accordion
		$("#accordion").accordion({ header: "h3", active: false, collapsible: true, changestart: function(event, ui) {
			
			// Instantiate our object
			var types = { 
				up: "move-up", 
				down: "move-down", 
				fade: "fade-only"
			}
			
			$(this).mover({ 
				newItem: ui.newHeader[0], 
				oldItem: ui.oldHeader[0],
				types: types
			});
			
			$(ui.newHeader).addClass("active");
			$(ui.oldHeader).removeClass("active");
		}});
		
	});

(function($) {

	$.mover = { };

	// Set our default values
	$.mover.defaultOptions = {
		initItem: 0,
		distance: 15,
		duration: 300,
		newItem: null,
		oldItem: null,
		nextID: null,
		existingID: null,
		positions: {
			existingEl: {},
			nextEl: {}
		},
		objects: { },
		types: { up: "mover-up", down: "mover-down", fade: "mover-fade" },
		addClass: "mover-"
	}
	
	$.mover.init = function(el, options, callback) {
	
		// Merge our user defined options with our default options
		var options = $.extend({}, $.mover.defaultOptions, options);
		var options = this.options = $.meta ? $.extend({}, options, $(this).data()) : options;
		
		// Find the existing and next elements to move
		$.mover.findPositions();
		
		// Start movin'!
		$.mover.animateExisting();
		
	}
	
	$.mover.findPositions = function() {
		
		// Now get the existing / next elements
		
		this.options.existingID = $(this.options.oldItem).find('a.product').attr("href");
		this.options.nextID = $(this.options.newItem).find('a.product').attr("href");
		
		// Get / Set default Positions
		$.mover.defaultPositions(this.options.existingID, this.options.nextID);
		$.mover.actualPositions();
		
	}
	
	$.mover.animateExisting = function() {
		
		// Get / Set elements and move values
		var el = $(this.options.existingID);
		var move = this.options.positions.existingEl;
		var duration = this.options.duration;
		
		// Ensure that valid values are set
		el.css({ display: "block", opacity: 1}).children().css({ display: "block", opacity: 1 });	
		
		// Animate each child element
		el.children().each(function(index) {
									
			var toPos = move[index].moveToPos;
			var fromPos = move[index].moveFromPos;
			
			var element = $(this);
			element.css({ top: fromPos});
			
			element.animate({top: toPos, opacity: 0}, duration, function() {
				element.css({ top: fromPos }).parent().css({ display: "none", opacity: 0});
				$.mover.animateNext();
			});
			
		});
		
	}
	
	$.mover.animateNext = function() {
	
		// Get / Set elements and move values
		var el = $(this.options.nextID);
		var move = this.options.positions.nextEl;
		var duration = this.options.duration;
		
		// Ensure that valid values are set
		el.css({ display: "none", opacity: 1}).children().css({ display: "block", opacity: 0 });	
		
		// Animate each child element
		el.children().each(function(index) {
			
			var toPos = move[index].moveToPos;
			var fromPos = move[index].moveFromPos;
			
			var element = $(this);
			element.parent().css({display: "block"});
			element.css({ top: fromPos});
			
			element.animate({top: toPos, opacity: 1}, duration, function() {
				element.css({ top: toPos }).parent().css({ display: "block", opacity: 1});
			});
		});
	}
	
	$.mover.actualPositions = function() {
		
		// Object we are about to modify
		var obj = this.options.positions.existingEl;
		
		// For each object member / property
		for(var key in obj) {
			
			// Get element's classes
			var classes = $("." + this.options.addClass + key).attr("class").split(" ");
			
			// Loop through each class and see if we should animate it
			for(var i = 0; i < classes.length; i++) {
				
				switch(classes[i]) {
					// Set existing and next positions for "UP" animation
					case "move-up" :
						this.options.positions.existingEl[key].moveToPos += this.options.distance;
						this.options.positions.nextEl[key].moveFromPos += this.options.distance;
						this.options.positions.existingEl[key].alphaTo = 0;
						this.options.positions.nextEl[key].alphaFrom = 0;
						break;
					// Set existing and next positions for "DOWN" animation
					case "move-down" :
						this.options.positions.existingEl[key].moveToPos -= this.options.distance;
						this.options.positions.nextEl[key].moveFromPos -= this.options.distance;
						this.options.positions.existingEl[key].alphaTo = 0;
						this.options.positions.nextEl[key].alphaFrom = 0;
						break;
					// Set existing and next opacity for "FADE" animation
					case "fade" :
						this.options.positions.existingEl[key].alphaTo = 0;
						this.options.positions.nextEl[key].alphaFrom = 0;
						break;
				}
			}
			
		}

	}
	
	$.mover.defaultPositions = function(existingID, nextID) {
		
		// Set local variable to prevent "undefined"
		var positions = { existingEl: {}, nextEl: {} };
		
		// Set the default positions for the Existing elements
		$(existingID).children().each(function(index) {
			
			// Shortcut to element
			var el = $(this);
			
			el.addClass($.mover.options.addClass + index);
			
			// Save positions
			positions.existingEl[index] = { moveToPos: Math.round(el.position().top), moveFromPos: Math.round(el.position().top) };
			
		});
		
		// Set the default positions for the Next elements -- NOTE: We can't get the position from elements that are hidden, we must show / hide to get the values
		$(nextID).css({display: "block"}).children().each(function(index) {
			
			// Shortcut to element
			var el = $(this);
			
			el.addClass($.mover.options.addClass + index);
			
			// Save positions
			positions.nextEl[index] = { moveToPos: Math.round(el.position().top), moveFromPos: Math.round(el.position().top) };
			
		});
		
		$(nextID).css({display: "none"});
		
		this.options.positions = positions;
	}
	
	$.fn.mover = function(options, callback) {

		return this.each(function() {
			$.mover.init(this, options, callback);
		});

	}

})(jQuery);