﻿$(function ()
{
	initSlideshowPopup(parseInt($("#carousel-wrapper").attr("data-id")));
});

function initSlideshowPopup(slideshowId) {
	var jsonUrl = "/Templates/Resources/Data/data.js?noFlash=true"; //remove

	if (slideshowId != 0)
		jsonUrl = "/SlideshowHandler.ashx?SlideshowId=" + slideshowId + "&epslanguage=" + currentCulture;

	if (!$("#slideshow-popup").hasClass(settings.selectors.loaded)) {
		if(swfobject.hasFlashPlayerVersion("1")) { //remove the !(not)
			//Load flash
			var flashvars = { data: escape(jsonUrl), fontpath: "/Templates/Resources/Flash/Slideshow/fonts" };
			var params = { wmode: "transparent" };
			var attributes = {};
			swfobject.embedSWF("/Templates/Resources/flash/slideshow/Carousel.swf", "slideshow-flash", "960", "355", "10.0.0", false, flashvars, params, attributes);
		}
		else {
			//Load fallback
			loadFallbackData(jsonUrl + "&noFlash=true");
		}
	}
}
 
var settings = {
	selectors: {
		wrapper: "slideshow",
		slideNavigation: "slideshow-slide-navigation",
		slides: "slideshow-slides",
		slide: "slideshow-slide",
		slideProduct: "slideshow-slide-product",
		pagination: "slide-pagination",
		next: "slideshow-next",
		prev: "slideshow-prev",
		positioned: "positioned",
		selected: "selected",
		disabled: "disabled",
		current: "current",
		loaded: "loaded"
	},
	animations: {
		slide: {
			duration: 300,
			easing: "swing"
		}
	},
	globalTexts: new Array(),
	slides: {
		currentIndex: null
	},
	autoplay: {
		value: true,
		interval: 100,
		timer: null
	},
	loop: true
};

function loadFallbackData(jsonUrl) {
	$("#slideshow-popup .slideshow").show();
	//Get data
	$.getJSON(jsonUrl, function (data) {
		try {
			mergeSettings(data);
			drawSlides(data);
			initSlideshow(); //Click events etc
		}
		catch (err) {
			console.log(err);
		}
	});
}

function mergeSettings(data) {
	settings.globalTexts = data.globalTexts;
	settings.autoplay = data.settings.autoplay;
}

function initSlideshow() {

	//Show first slide
	var $firstSlide = $("." + settings.selectors.slide + ":first", "." + settings.selectors.slides);
	$firstSlide.show().addClass(settings.selectors.current);

	//Set the current slide as selected
	setCurrentSlide($firstSlide);

	//Is autoplay enabled?
	if (settings.autoplay.value) {
		var interval = settings.autoplay.interval * 1000;
		settings.autoplay.timer = window.setInterval(moveNext, interval);
	}

	//Init arrow navigation
	initMainNavigation();

	//Init arrow navigation
	initPagination();

	//Allow navigation with the right and left arrow keys
	initArrowKeysNavigation();
}

function drawSlides(data) {
	var items = new Array();

	if (data.items.length > 0) {
		//Clear the wrapper (Loading message)
		$(".slideshow-loader").remove();

		//Create the slides wrapper
		var $wrapper = $(document.createElement("div")).attr("class", settings.selectors.slides).appendTo("." + settings.selectors.wrapper);

		//Create the slides wrapper
		var $pagination = $(document.createElement("div")).attr("class", settings.selectors.pagination).appendTo("." + settings.selectors.wrapper);

		//Loop all images
		for (var i = 0; i < data.items.length; i++) {
			var item = data.items[i];
			if (item.images) {
				for (var j = 0; j < item.images.length; j++) {
					if (item.images[j].type == "normal")
						drawSlide(item);
				}
			}
		}

		//Draw slide navigation
		var $slideNavigation = $(document.createElement("div")).addClass(settings.selectors.slideNavigation);
		var $prevNavLink = $(document.createElement("a")).text("prev").addClass(settings.selectors.prev).appendTo($slideNavigation);
		var $nextNavLink = $(document.createElement("a")).text("next").addClass(settings.selectors.next).appendTo($slideNavigation);
		$slideNavigation.appendTo($wrapper);

		//Hide pagination and navigation if we only have 1 slide
		if (data.items.length === 1) {
			$slideNavigation.hide();
			$("." + settings.selectors.pagination).hide();
		}
	}
}

function drawSlide(item) {
	//Define the wrapper
	var $images = $("." + settings.selectors.slides);
	//console.log(item)
	//Loop images
	var images = item.images;
	for (var j = 0; j < images.length; j++) {
		var image = images[j];
		if (image.type == "normal") {
		
			//Create the slide wrapper and the image element
			var $slide = $(document.createElement("div")).addClass(settings.selectors.slide);
			var $link = $(document.createElement("a")).attr("href", item.link.href);
			var $img = $(document.createElement("img")).attr("src", image.image.href);
			var $textlink = $(document.createElement("a")).attr("href", item.link.href);
			var $text = $(document.createElement("h2")).text(item.link.text).addClass(item.link.align).addClass(item.link.textsize).css("color", item.link.style.color);
			if (item.hotspots) {
				$text.addClass("left");
				$text.removeClass("right");
			}
			//Append the image to the slide, and the slide to the DOM
			$img.appendTo($link);
			$link.appendTo($slide);
			$text.appendTo($textlink);
			$textlink.appendTo($slide);
			$slide.appendTo($images);

			//Add a pagination link
			$(document.createElement("a")).attr("href", "#").text($slide.index() + 1).appendTo("." + settings.selectors.pagination).addClass("digit-" + ($slide.index() + 1));
		}
	}
	
	if (item.hotspots) {
		for (var j = 0; j < item.hotspots.length; j++) {
			var hotspot = item.hotspots[j];
			if (hotspot) {
				$("#slideProductTemplate").tmpl(hotspot, { link: item.link.href }).appendTo($slide);
				break;
			}
		}
	}
}

function stopAutoplay() {
	//Stop autoplay
	window.clearInterval(settings.autoplay.timer);
}

function initMainNavigation() {

	//Show next slide
	$("." + settings.selectors.slideNavigation).find("." + settings.selectors.next).click(function () {
		var $nav = $(this);
		if (!$nav.hasClass("disabled")) {
			//Action made, stop autoplay, and change slide
			stopAutoplay();
			moveNext();
		}
		return false;
	});

	//Show prev slide
	$("." + settings.selectors.slideNavigation).find("." + settings.selectors.prev).click(function () {
		var $nav = $(this);
		if (!$nav.hasClass("disabled")) {
			//Action made, stop autoplay, and change slide
			stopAutoplay();
			movePrev();
		}
		return false;
	});
}

function initPagination() {
	//Show next slide
	$("." + settings.selectors.pagination + " a").click(function () {
		var $link = $(this);
		if (!$link.hasClass(settings.selectors.selected)) {
			//Action made, stop autoplay, and change slide
			stopAutoplay();
			var $next = $("." + settings.selectors.slide).eq($link.index());
			makeMove(getCurrentSlide(), $next);
		}
		return false;
	});
}

function initArrowKeysNavigation() {
	$(document).keydown(function (e) {
		//Brossbrowser keyCode recognition
		var keyCode = e.keyCode || e.which;

		//Make arrow keys keyCodes into a hash for easy readability
		var keys = { leftArrow: 37, rightArrow: 39 };

		switch (keyCode) {
			case keys.leftArrow:
				//Action made, stop autoplay, and change slide
				stopAutoplay();
				movePrev();
				break
			case keys.rightArrow:
				//Action made, stop autoplay, and change slide
				stopAutoplay();
				moveNext();
				break;
		}
	});
}

//Gets the current slide
function getCurrentSlide() {
	return $("." + settings.selectors.current, "." + settings.selectors.slides);
}

//Determines the next slide
function getNext($current) {
	var $next = $current.next("." + settings.selectors.slide);

	//The next slide after the last one, is the first one
	if (!$next.length)
		$next = $current.siblings("." + settings.selectors.slide + ":first");

	return $next;
}

//Determines the prev slide
function getPrev($current) {
	var $prev = $current.prev("." + settings.selectors.slide);

	//The prev slide after the first one, is the last one
	if (!$prev.length)
		$prev = $current.siblings("." + settings.selectors.slide + ":last");

	return $prev;
}

//Animate to the next slide
function moveNext() {
	var $current = getCurrentSlide();
	var $next = getNext($current);
	if (canMoveNext($current))
		makeMove($current, $next);
}

//Animate to the prev slide
function movePrev() {
	var $current = getCurrentSlide();
	var $prev = getPrev($current);
	if (canMovePrev($current))
		makeMove($current, $prev);
}

//Make the move
function makeMove($from, $to) {
	//Only toggle disable/enable navigation if looping is off
	if (!settings.loop)
		toggleSlideNavigation($to);

	//Set the current thumb as selected
	setCurrentSlide($to);

	//Make the transition
	animateSlideTransition($from, $to);
}

function setCurrentSlide($current) {
	var index = $current.index();
	settings.slides.currentIndex = index;
	
	//Set the current thumb as selected
	$("." + settings.selectors.pagination + " a").removeClass(settings.selectors.selected);
	$("." + settings.selectors.pagination + " a").eq(index).addClass(settings.selectors.selected);
}

//The slide transition
function animateSlideTransition($from, $to) {
	$from.removeClass(settings.selectors.current).fadeOut(settings.animations.slide.duration, settings.animations.slide.easing);
	$to.addClass(settings.selectors.current).fadeIn(settings.animations.slide.duration, settings.animations.slide.easing);
}

function toggleSlideNavigation($slide) {
	//Disable prev navigation if the first slide is the current one
	if (canMovePrev($slide))
		$("." + settings.selectors.prev, "." + settings.selectors.slideNavigation).removeClass(settings.selectors.disabled);
	else
		$("." + settings.selectors.prev, "." + settings.selectors.slideNavigation).addClass(settings.selectors.disabled);

	//Disable next navigation if the last slide is the current one
	if (canMoveNext($slide))
		$("." + settings.selectors.next, "." + settings.selectors.slideNavigation).removeClass(settings.selectors.disabled);
	else
		$("." + settings.selectors.next, "." + settings.selectors.slideNavigation).addClass(settings.selectors.disabled);
}

function canMoveNext($current) {
	//Slide can move next if the current slide the isn't the last one, or if looping is enabled
	var $lastSlide = $("." + settings.selectors.slide + ":last");
	return ($current.index() != $lastSlide.index()) || settings.loop;
}

function canMovePrev($current) {
	//Slide can move prev if the current slide the isn't the first one, or if looping is enabled
	var $firstSlide = $("." + settings.selectors.slide + ":first");
	return ($current.index() != $firstSlide.index()) || settings.loop;
}
