/**
 * Javascript library for template ExtremeMagento
 * @copyright 2007 Quick Solution LTD. All rights reserved.
 * @author Giao L. Trinh <giao.trinh@quicksolutiongroup.com>
 */

(function() {

	

function decorateSlideshow_old() {
	var $$li = $$('.slideshow ul li');
	if ($$li.length > 0) {
		
		// reset UL's width
		var ul = $$('.slideshow ul')[0];
		var w = 0;
		$$li.each(function(li) {
			w += li.getWidth();
		});
		ul.setStyle({'width':w+'px'});
		
		// private variables
		var previous = $$('.slideshow a.previous')[0];
		var next = $$('.slideshow a.next')[0];
		var num = 3;
		var width = ul.down().getWidth() * num;
		var slidePeriod = 3; // seconds
		var manualSliding = false;
		
		// next slide
		function nextSlide() {
			new Effect.Move(ul, { 
				x: -width,
				mode: 'relative',
				queue: 'end',
				duration: 1.0,
				transition: Effect.Transitions.sinoidal,
				afterFinish: function() {
					for (var i = 0; i < num; i++)
						ul.insert({ bottom: ul.down() });
					ul.setStyle('left:0');
				}
			});
		}
		
		// previous slide
		function previousSlide() {
			new Effect.Move(ul, { 
				x: width,
				mode: 'relative',
				queue: 'end',
				duration: 1.0,
				transition: Effect.Transitions.sinoidal,
				beforeSetup: function() {
					for (var i = 0; i < num; i++)
						ul.insert({ top: ul.down('li:last-child') });
					ul.setStyle({'position': 'relative', 'left': -width+'px'});
				}
			});
		}
		
		
		// bind next button's onlick event
		next.observe('click', function(event) {
			Event.stop(event);
			manualSliding = true;
			nextSlide();
		});
		
		// bind previous button's onclick event
		previous.observe('click', function(event) {
			Event.stop(event);
			manualSliding = true;
			previousSlide();
		});
		
		
		// auto run slideshow
		new PeriodicalExecuter(function() {
			if (!manualSliding) nextSlide();
			manualSliding = false;
		}, slidePeriod);
		
		
	}
}


function decorateSlideshow() {
	if ($('slideshow')) {
		
		var slidePeriod = 3; // seconds
		var shiftTime = 1/2;
		
		$('slideshow').select('.slideshow-box').each(function(box, i) {
			// add prev & next buttons
			box.insert('<a href="#" class="previous">Previous</a><a href="#" class="next">Next</a>');
			
			var ul = box.down('ul');
			var manualSliding = false;

			
			// next slide
			function nextSlide() {
				var li = ul.down();
				var height = li.getHeight();
				
				new Effect.Move(ul, { 
					y: -height,
					mode: 'absolute',
					queue: { position: 'end', scope: 'slideshow'+i },
					duration: 1.0,
					afterFinish: function() {
						ul.insert({ 'bottom': li });
						ul.setStyle('top:0');
					}
				});
			}
			
			// previous slide
			function previousSlide() {
				var li = ul.down('li:last-child');
				var height = li.getHeight();
				
				new Effect.Move(ul, { 
					y: 0,
					mode: 'absolute',
					queue: { position: 'end', scope: 'slideshow'+i },
					duration: 1.0,
					beforeSetup: function() {
						ul.insert({ top: li });
						ul.setStyle({'position': 'absolute', 'top': -height+'px'});
					}
				});
			}
			
			// bind Next button event
			box.down('.next').observe('click', function(event) {
				Event.stop(event);
				manualSliding = true;
				nextSlide();
			});
			
			// bind Previous button event
			box.down('.previous').observe('click', function(event) {
				Event.stop(event);
				manualSliding = true;
				previousSlide();
			});
			
			// auto run slideshow
			setTimeout(function() {
				new PeriodicalExecuter(function() {
					if (!manualSliding) nextSlide();
					manualSliding = false;
				}, slidePeriod);
			}, shiftTime*1000*i);
			
		});
	}
}

document.observe("dom:loaded", function() {
	decorateSlideshow();
});

// }}}

})();