$(function(){
	$('#picker').suitPicker();
	$('#designer_range').showSuits();
	$('.information').infoBox();
});

$.fn.suitPicker = function(){
	return this.each(function(){
		var container = $(this).css('overflow','hidden');
		var slides = $('>div',this);
		var scrollAmount = container.width();
		var ul = $('>ul',slides);
		var items = $('>li',ul);
		var timer;
		
		items.eq(0).clone().appendTo(ul);
		
		var slideGallery = function(e){
			var currentScroll = slides.scrollLeft();
			var nextPos;
			if (e.data.direction == 'prev') {
				if (currentScroll) {
					nextPos = currentScroll-scrollAmount;
				} else {
					slides.scrollLeft(scrollAmount*(items.length))
					nextPos = scrollAmount*(items.length-1);
				}
			} else {
				nextPos = currentScroll + scrollAmount;
			}
			slides.animate({ scrollLeft: nextPos },500,function(){
				if (nextPos >= scrollAmount*(items.length)) {
					slides.scrollLeft(0);
				}
			});
		}
		
		slides.css({
			height: items.outerHeight(),
			overflow: 'hidden'
		});
		ul.css({width: items.outerWidth(true) * items.length * 2 + 'px'});
		
		var prevButton = $('<button id="button_prev"><img src="/images/button_prev.png" alt="Previous" /></button>')
			.bind('click',{direction:'prev'},function(e){
				window.clearInterval(timer);
				if (!slides.is(':animated')) {
					slideGallery(e);
				}
			}).appendTo(container);
		var nextButton = $('<button id="button_next"><img src="/images/button_next.png" alt="Next" /></button>')
			.bind('click',{direction:'next'},function(e){
				window.clearInterval(timer);
				if (!slides.is(':animated')) {
					slideGallery(e);
				}
			}).appendTo(container);
			
		// timer = window.setInterval(function(){
		// 	slideGallery({data:{direction:'next'}});
		// },7000);
		
	});
}

$.fn.showSuits = function(){
	return this.each(function(){
		var defaultStyle = {
			marginTop: 75,
			marginBottom: 75,
			height: 233,
			opacity: .5
		};
		var onStyle = {
			marginTop: 0,
			marginBottom: 0,
			height: 383,
			opacity: 1
		};
		var hoverStyle = {
			opacity: .7
		};
		var defaultAnimation = {
			queue: false,
			duration: 300
		};
		var container = $(this);
		var list = container.children('ul');
		var suitWidth = container.children().first().width();
		var suits = container.children('ul').children('li').children('.suit_select');
		suits.first().next().show();
		suits.first().siblings('a').show();
		suits.not(':first, .information').children().css(defaultStyle);
		
		suits.next().find('a').colorbox({
			innerWidth: 332,
			innerHeight: 500,
			opacity: .75
		});
		
		suits.click(function(){
			var suit = $(this);
			var current = suits.filter('.current');

			if (!suit.is('.current')) {
				var offset = suits.index(suit)*247-62;
				current.removeClass('current').children().animate(defaultStyle,defaultAnimation);
				suit.addClass('current').children().animate(onStyle,defaultAnimation);
				container.animate({
					scrollLeft: offset
				},defaultAnimation);
				suit.next().fadeIn(300);
				suit.siblings('a').fadeIn(300);
				current.next().fadeOut(300);
				current.siblings('a').fadeOut(300);
			}
			return false;
		}).mouseenter(function(){
			var suit = $(this);
			if (suit.is(':not(.current, .information)')) suit.children().animate(hoverStyle,150);
		}).mouseleave(function(){
			var suit = $(this);
			if (suit.is(':not(.current, .information)')) suit.children().animate(defaultStyle,150);
		});
		
		list.width(suits.length*suitWidth);
		container.scrollLeft(0);
		
	});
}
$.fn.infoBox = function(){
	return this.each(function(){
		var link = $(this);
		link.colorbox({
			width: 360,
			inline: true,
			opacity: 0.7,
			href: link.attr('href')
		})
	});
}