﻿// JavaScript Document

Cufon.replace('ul.labels span.collection', { fontFamily: 'SwissThin' });
Cufon.replace('ul.labels span.gender, ul.labels span.name, ul.labels span.sales', { fontFamily: 'CooperBlack' });
Cufon.replace('.carousel .sale h2', { fontFamily: 'HelveticaNeueLT Com 77 BdCn' });
Cufon.replace('.carousel .sale h3', { fontFamily: 'Helvetica Neue' });

function initHomeCarousel(t) {

    $.fx.interval = 50;

	if (!t || t < 5) { t = 5; }
	var isIE = ($.browser.msie) ? true : false;
	
	var slideHeight = 1500;
	
	var cHeight = $(window).height() - 182;
	if (cHeight < 650) { cHeight = 650; }
	
	var $carouselHolder = $('div.carousel-holder');
	$carouselHolder.css('height', cHeight);
	
	var cWidth = $(window).width();
	$(window).load(function() { 
		$carouselHolder.css('width', $(window).width()); 
	});
	if (cWidth < 980) { cWidth = 980; }
	var backlash = Math.floor(cWidth * 0.2);
	var $carouselWrapper = $('div.carousel-wrapper', $carouselHolder);
	var $slidesList = $('ul.carousel', $carouselWrapper);
	
	var $firstSlide = $('li.slide:first-child', $slidesList).clone();
	var $lastSlide = $('li.slide:last-child', $slidesList).clone();
	$slidesList.append($firstSlide).prepend($lastSlide);
	
	var slidesNumber = $('li.slide', $slidesList).width(cWidth).length;
	var currentSlide = 1;
	var $currentSlide = $('li.slide:eq(' + currentSlide + ')', $slidesList);
	var $currentImage = $('div.image', $currentSlide).height(slideHeight);
	var $currentLabels = $('ul.labels', $currentSlide).height(slideHeight);
	var slidesImagesPath = Array();
	var isDrugging = false;
	var dragStartTime;
	var dragTime;
	var dragStartTop;
	var isMoving = true;
	var autoTimer = 0;

	var $preloader = $('div.preloader', $carouselHolder);
	var $nextArrow = $('a.slide-next', $carouselHolder);
	var $prevArrow = $('a.slide-prev', $carouselHolder);
	var $upArrow = $('a.drag-up', $carouselHolder);
	var $downArrow = $('a.drag-down', $carouselHolder);
	
	$carouselWrapper.width(cWidth * (slidesNumber * 2 - 1)).height(slideHeight - cHeight).css({'top' : cHeight - slideHeight , 'left' : - cWidth * (slidesNumber - 1)});
	
	Preloader(true);
	$('li.slide', $slidesList).each(function() {
		var $img = $('img', this);
		slidesImagesPath.push($img.attr('data-src'));
		$img.remove();
	});
	$currentImage.append('<img alt="" class="loaded" src="" />');
	$('img', $currentImage)
		.bind('load', function() {
			$(this).unbind('load');
			Preloader(false);
		})
		.attr('src', slidesImagesPath[currentSlide]);
	
	$(function() { 
		$('div.note-div', $carouselHolder).delay(1500).fadeOut(300, function() { isMoving = false; }); 
	});
	
	var dragContainment = (isIE) ? "" : "parent";
	
	$slidesList
		.width(slidesNumber * cWidth)
		.css({'top': slideHeight - cHeight - 140, 'left' : cWidth * (slidesNumber - 1 - currentSlide)})
		.draggable({ containment: dragContainment, axis: "y" })
		.bind('dragstart', function(event, ui) {
			$(this).stop(true, true);
			var d = new Date();
			dragStartTime = d.getTime();
			dragStartTop = $(this).position().top;
			clearTimeout(autoTimer);
		})
		.bind('dragstop', function(event, ui) {
			var newTop = $(this).position().top;
			var d = new Date();
			dragTime = d.getTime() - dragStartTime;
			if (dragTime < 300) {
				newTop = newTop - 60 * (dragStartTop - newTop) / dragTime;
			}
			if (newTop < 0) { newTop = 0; }
			if (newTop > slideHeight - cHeight) { newTop = slideHeight - cHeight; }
			
			$(this).animate({'top' : newTop}, 500, 'easeOutCubic');
			
			autoTimer = setTimeout(function() { nextSlide(1); }, t * 1000); 
		});
	
	autoTimer = setTimeout(function() { nextSlide(1); }, t * 1000);
	
	function nextSlide(direction) {
		if (isMoving) { return; }
		isMoving = true;
		
		clearTimeout(autoTimer);
		
		makeInfinityMoving(direction);
		
		$currentLabels.animate({'margin-left' : direction * cWidth / 2, 'opacity' : 0}, 1200, 'easeInOutCubic', function() { $(this).css('margin-left', 0); });
		
		currentSlide += direction;
		$currentSlide = $('li.slide:eq(' + currentSlide + ')', $slidesList);
		$currentImage = $('div.image', $currentSlide);
		$currentLabels = $('ul.labels', $currentSlide);
		$currentLabels.css({'margin-left' : - direction * cWidth / 2, 'opacity' : 0});
		
		$currentLabels.animate({'margin-left' : 0, 'opacity' : 1}, 1200, 'easeInOutCubic', function() {
			if (isIE) {
				$(this).removeAttr('style');
			}
		});
		$slidesList.animate({'top': slideHeight - cHeight - 140, 'left': cWidth * (slidesNumber - 1 - currentSlide)}, {
			duration : 1200,
			easing : 'easeInOutCubic',
			complete: function() { isMoving = false; autoTimer = setTimeout(function() { nextSlide(1); }, t * 1000); },
			queue : false
		});
		
		//fixArrows();
		
		if ($('img.loaded', $currentImage).length < 1) {
			Preloader(true);
			loadImage();
		}
	}
	
	function loadImage() {
		$currentImage.append('<img alt="" class="loaded" src="" />');
		$('img', $currentImage)
			.bind('load', function() {
				$(this).unbind('load');
				Preloader(false);
			})
			.attr('src', slidesImagesPath[currentSlide]);		
	}
	
	function makeInfinityMoving(dir) {
		if (currentSlide + dir >= 0 && currentSlide + dir < slidesNumber) { return; }
		
		$currentLabels.css({'margin-left' : 0, 'opacity' : 0});
		if (currentSlide + dir < 0) { 
			currentSlide += (dir + slidesNumber - 1);
		}
		if (currentSlide + dir >= slidesNumber) { 
			currentSlide += (dir - slidesNumber + 1);
		}
		
		$currentSlide = $('li.slide:eq(' + currentSlide + ')', $slidesList);
		$currentImage = $('div.image', $currentSlide);
		if ($('img.loaded', $currentImage).length < 1) {
			loadImage();
		}
		$currentLabels = $('ul.labels', $currentSlide);
		$currentLabels.css({'opacity' : 1})
		if (isIE) {
			$currentLabels.removeAttr('style');
		}
		$slidesList.css({'left': cWidth * (slidesNumber - 1 - currentSlide)});
	}
	
	$nextArrow.click(function() {
		nextSlide(1);
	});
	
	$prevArrow.click(function() {
		nextSlide(-1);
	});
	
	function fixArrows() {
		if (currentSlide == 0) { $prevArrow.hide(); } else { $prevArrow.show(); }
		if (currentSlide == slidesNumber - 1) { $nextArrow.hide(); } else { $nextArrow.show(); }
	}
	
	function Preloader(show) {
		if (show) {
			$preloader.fadeIn(300);
		} else {
			$preloader.fadeOut(300);
			$preloader.stop(true, true);
			$preloader.hide();
		}
	}
	
	if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
		$upArrow
			.css('display', 'block')
			.click(function() { moveSlideUp(); });
		
		$downArrow
			.css('display', 'block')
			.click(function() { moveSlideDown(); });
	}
	
	function moveSlideUp() {
		if (isMoving) { return; }
		var newTop = $slidesList.position().top + 300;
		if (newTop > slideHeight - cHeight) { newTop = slideHeight - cHeight; }
		$slidesList.stop(true, true);
		$slidesList.animate({'top' : newTop}, 500, 'easeOutCubic');			
	}
	
	function moveSlideDown() {
		if (isMoving) { return; }
		var newTop = $slidesList.position().top - 300;
		if (newTop < 0) { newTop = 0; }
		$slidesList.stop(true, true);
		$slidesList.animate({'top' : newTop}, 500, 'easeOutCubic');
	}
	
	$(window).resize(function() {
		$carouselHolder.css('width', 0);
		cWidth = $(window).width();
		cHeight = $(window).height() - 182;
		if (cHeight < 650) { cHeight = 650; }
		$('li.slide', $slidesList).width(cWidth);
		$carouselHolder.width(cWidth);
		$carouselHolder.height(cHeight);
		$carouselWrapper.width(cWidth * (slidesNumber * 2 - 1)).height(slideHeight - cHeight).css({'top' : cHeight - slideHeight , 'left' : - cWidth * (slidesNumber - 1)});
		$slidesList.width(slidesNumber * cWidth).css({'left': cWidth * (slidesNumber - 1 - currentSlide)}).draggable({ containment: dragContainment, scroll: false, axis: "y" });
		if ($slidesList.position().top > slideHeight - cHeight - 140) {
			$slidesList.css({'top' : slideHeight - cHeight - 140});
		}
	});
	
	/*
	$(document).jkey('left, right, up, down, ctrl, tab' , function(key){
		switch(key) {
			case 'left' : 
				nextSlide(-1);
				break;
			case 'right' :
				nextSlide(1);
				break;
			case 'up' :
				moveSlideUp();
				break;
			case 'down' :
				moveSlideDown();
				break;
		}
	});
	*/

	$(document).keydown(function(e) {
	    switch (e.keyCode) {
	        case 37:
	            nextSlide(-1);
	            break;
	        case 38:
	            moveSlideUp();
	            break;
	        case 39:
	            nextSlide(1);
	            break;
	        case 40:
	            moveSlideDown();
	            break;
	        case 9:
	            if (!e) var e = window.event;
	            e.cancelBubble = true;
	            e.returnValue = false;
	            if (e.stopPropagation) {
	                e.stopPropagation();
	                e.preventDefault();
	            }
	            break;
	    }
	});
	
	var preloaderСurrentFrame = 0;
	var preloaderFramesNumber = 12;
	var preloaderTimer = setInterval(nextPreloaderFrame, 100);
	
	function nextPreloaderFrame() {
		$('img:eq(' + preloaderСurrentFrame + ')', $preloader).hide();
		preloaderСurrentFrame = (preloaderСurrentFrame < preloaderFramesNumber) ? 0 : preloaderСurrentFrame + 1;
		$('img:eq(' + preloaderСurrentFrame + ')', $preloader).show();
	}

}
