var PDC = PDC || {};
PDC.Module = PDC.Module || {};

PDC.Module.LatestCarousel = {
	// Adds carousel
	init:function(){

		var $latestGamesCarousel = $("#latest-games-carousel"),
		sJSCarouselClass = "js-carousel-latest";

		// Array of objects for extra carousel items && the html parent element are in the page
		if (typeof aLatestCarouselItems != "undefined" && $latestGamesCarousel.length > 0) {

			// This is the html for templating with jQuery template
			if(typeof sVersionedStaticBasePath == "undefined"){sVersionedStaticBasePath = "";}//Checking the global variable exists
        	var sTemplateURL = sVersionedStaticBasePath+"/static/includes/template/carousel-latest.html";//Making the path version specific

			// Get the html template for the extra latest carousel items
			$.get(sTemplateURL, function(data) {

				// Initialises the template
				$.template("oCarouselJSItemsTemplate",data);

				// Passes the js array to the template and appends combined result of data and html, to the carousel
				$.tmpl("oCarouselJSItemsTemplate",aLatestCarouselItems).appendTo($latestGamesCarousel);

				// Only do the carousel if more than carouselCountNonJS which is set in the jsp
				if ($latestGamesCarousel.find("li").length > nCarouselCountNonJS) {

					// Initialises the jcarousel
					$latestGamesCarousel.jcarousel({
						wrap: "circular",
						scroll: nCarouselCountNonJS,
						itemVisibleInCallback: {
            				onAfterAnimation: _itemVisibleInCallbackAfterAnimation
        				}
					});

					var $leftController = $("#latest-carousel div.jcarousel-prev"),
						$rightController = $("#latest-carousel div.jcarousel-next"),
						sCarouselLeftController = "latest-carousel-left-controller",
						sCarouselRightController = "latest-carousel-right-controller",
						sWtEventIdLeft = "tickerleft",
						sWtEventIdRight = "tickerright";

					// Improve the jcarousel accessibility
					if ($leftController.length > 0 && $rightController.length > 0) {//If controllers exist
						//$leftController.wrap('<a href="#" id="'+sCarouselLeftController+'" title="'+sCarouselPrevDictKey+'"></a>');
						//$rightController.wrap('<a href="#" id="'+sCarouselRightController+'" title="'+sCarouselNextDictKey+'"></a>');
						$leftController.wrap('<a href="#" id="'+sCarouselLeftController+'"></a>');
						$rightController.wrap('<a href="#" id="'+sCarouselRightController+'"></a>');
					}
					$("#"+sCarouselLeftController+", #"+sCarouselRightController).click(function(){
						var sEventId = ($(this).attr("id") == sCarouselLeftController) ? sWtEventIdLeft : sWtEventIdRight;
						PDC.WT.reportEvent(sEventId);
						return false;
					});
				}
				addCarouselJSHoverEffects();//Adds hover effects to the carousel item hover
			});
        }
        else if ($latestGamesCarousel.find("li").length <= nCarouselCountNonJS) {
			addCarouselJSHoverEffects();//Adds hover effects to the carousel item hover
        }
        else {
			return false; // Don't do anything
		}

		// Webtrends reporting on viewed items
		function _itemVisibleInCallbackAfterAnimation(carousel, item, idx, state) {
			var $sLinkItem = $("a.carousel-item", item).attr("pdc-data");

			if ($sLinkItem){
				PDC.WT.reportAdView($sLinkItem);
			}
		}

		// Add funkiness to the hover text and focus event also
		function addCarouselJSHoverEffects() {
			$latestGamesCarousel.addClass(sJSCarouselClass);
			var $latestGamesCarouselItem = $latestGamesCarousel.find("a.carousel-item");
			//Hover event
			$latestGamesCarouselItem.hover(function() {
                 carouselJSEffectShow($(this));
			}, function() {
				carouselJSEffectHide($(this));
			});
			//Focus event
            $latestGamesCarouselItem.focus(function() {
               carouselJSEffectShow($(this));
			});
            //Focus Out event
            $latestGamesCarouselItem.blur(function() {
               carouselJSEffectHide($(this));
			});
		}

		//Show Content
		function carouselJSEffectShow($currentCarouselItem) {
			var $carouselHoverContent = $currentCarouselItem.find("span.content");
			var $carouselHoverContentTeaser = $carouselHoverContent.find("span");
			$carouselHoverContentTeaser.hide();
			$carouselHoverContent.stop(true, true).animate({height:"84", "margin-top":"-89"}, 300, function(){
				$carouselHoverContentTeaser.fadeIn("fast");
			});
		}

		//Hide Content
		function carouselJSEffectHide($currentCarouselItem) {
			var $carouselHoverContent = $currentCarouselItem.find("span.content");
			$carouselHoverContent.find("span").fadeOut("fast");
			$carouselHoverContent.stop(true, true).animate({height:"33", "margin-top":"-38"}, 300);
		}
	}
}