/// <reference path="video.js" />


jQuery(function () {
	var timer;
	jQuery("#homeBanners").data("banNum", 1);

	var jqButtons = jQuery(".buttons li div");
	var currentBannerId = 1; // [1,2,3,...]
	var totalBanners = jqButtons.length;
	var isChangingBanner = false;


	function right_arrow_click(event) {

		isChangingBanner = true;

		var jqTheClickElement = jQuery(this);
		if (jqTheClickElement.data("ignorerightclick") == true) {
			return;
		}
		jqTheClickElement.data("ignorerightclick", true);
		if ((jQuery("#homeBanners").data("banNum") + 1) <= totalBanners) {
			++currentBannerId;
			jQuery("#homeBanners").data("banNum", jQuery("#homeBanners").data("banNum") + 1)
			jQuery('.buttons li div').removeClass('bgbuttonactive');
			jQuery('.buttons li div').addClass('bgbutton');
			jQuery(".eachBanner").fadeOut('2000');
			jQuery('#bgbutton' + jQuery('#homeBanners').data('banNum')).removeClass('bgbutton');
			jQuery('#bgbutton' + jQuery('#homeBanners').data('banNum')).addClass('bgbuttonactive');
			jQuery("#divBanner" + jQuery("#homeBanners").data("banNum")).fadeIn('2000', function () {
				jqTheClickElement.data("ignorerightclick", false);
				isChangingBanner = false;
			});
		} else {
			currentBannerId = 1;
			jQuery("#homeBanners").data("banNum", 1);
			jQuery('.buttons li div').removeClass('bgbuttonactive');
			jQuery('.buttons li div').addClass('bgbutton');
			jQuery(".eachBanner").fadeOut('2000');
			jQuery('#bgbutton' + jQuery('#homeBanners').data('banNum')).removeClass('bgbutton');
			jQuery('#bgbutton' + jQuery('#homeBanners').data('banNum')).addClass('bgbuttonactive');
			jQuery("#divBanner" + jQuery("#homeBanners").data("banNum")).fadeIn('2000', function () {
				jqTheClickElement.data("ignorerightclick", false);
				isChangingBanner = false;
			});
		}
		clearTimeout(timer);
		timer = setTimeout(eval("right_arrow_click"), "6000");
	}

	function left_arrow_click(event) {

		isChangingBanner = true;

		var jqTheClickElement = jQuery(this);
		if (jqTheClickElement.data("ignoreleftclick") == true) {
			return;
		}
		jqTheClickElement.data("ignoreleftclick", true);
		if ((jQuery("#homeBanners").data("banNum") - 1) > 0) {
			--currentBannerId;
			jQuery("#homeBanners").data("banNum", jQuery("#homeBanners").data("banNum") - 1)
			jQuery('.buttons li div').removeClass('bgbuttonactive');
			jQuery('.buttons li div').addClass('bgbutton');
			jQuery(".eachBanner").fadeOut('2000');
			jQuery('#bgbutton' + jQuery('#homeBanners').data('banNum')).removeClass('bgbutton');
			jQuery('#bgbutton' + jQuery('#homeBanners').data('banNum')).addClass('bgbuttonactive');
			jQuery("#divBanner" + jQuery("#homeBanners").data("banNum")).fadeIn('2000', function () {
				jqTheClickElement.data("ignoreleftclick", false);
				isChangingBanner = false;
			});
		} else {
			currentBannerId = totalBanners;
			jQuery("#homeBanners").data("banNum", totalBanners);
			jQuery('.buttons li div').removeClass('bgbuttonactive');
			jQuery('.buttons li div').addClass('bgbutton');
			jQuery(".eachBanner").fadeOut('2000');
			jQuery('#bgbutton' + jQuery('#homeBanners').data('banNum')).removeClass('bgbutton');
			jQuery('#bgbutton' + jQuery('#homeBanners').data('banNum')).addClass('bgbuttonactive');
			jQuery("#divBanner" + jQuery("#homeBanners").data("banNum")).fadeIn('2000', function () {
				jqTheClickElement.data("ignoreleftclick", false);
				isChangingBanner = false;
			});
		}
		clearTimeout(timer);
		timer = setTimeout(eval("right_arrow_click"), "6000");
	}

	jQuery("#homeArrowLeft").bind('click', left_arrow_click);
	jQuery("#homeArrowRight").bind('click', right_arrow_click);

	jqButtons.bind('click', function (event) {
		var clickedBanner = 0;
		var found = false;
		jqButtons.each(function (i, e) {
			++clickedBanner;
			if (e == event.currentTarget) {
				found = true;
				return false;
			}
		});

		if (!found) {
			return;
		}

		currentBannerId = clickedBanner;
		jQuery("#homeBanners").data("banNum", currentBannerId - 1);
		right_arrow_click();
	});

	function OnLoad(event) {
		VideoJS.setupAllWhenReady();

		// save backup html of each banner div
		jQuery('.divBannerImg').each(function (i, e) {
			var jqE = jQuery(e);
			var jqBannerVideo = jqE.parent().children('.bannerVideo');

			var dataVideoUrl = jqBannerVideo.attr("data-videoUrl");
			var dataThumbUrl = jqBannerVideo.attr("data-thumbUrl");

			if (dataVideoUrl) {

				var videoPlayerTemplate
					= '<div class="video-js-box" style="display:none;">'
						+ '<video class="video-js" width="640" height="360" controls preload autoplay="true" poster="{{thumbUrl}}">'
							+ '<source src="{{videoUrl}}" type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" />'
							+ '<object class="vjs-flash-fallback" width="640" height="360" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">'
								+ '<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />'
								+ '<param name="allowfullscreen" value="true" />'
								+ '<param name="flashvars" value="config={&quot;playlist&quot;:[&quot;{{thumbUrl}}&quot;, {&quot;url&quot;: &quot;{{videoUrl}}&quot;,&quot;autoPlay&quot;:true,&quot;autoBuffering&quot;:true}]}" />'
								+ '<img src="{{thumbUrl}}" width="640" height="360" alt="Poster Image" title="No video playback capabilities." />'
							+ '</object>'
						+ '</video>'
					+ '</div>'
				;

				var videoPlayerHtml
					= videoPlayerTemplate
					.replace(/{{videoUrl}}/g, dataVideoUrl)
					.replace(/{{thumbUrl}}/g, dataThumbUrl)
				;

				jqBannerVideo.data("htmlBackup", videoPlayerHtml);
			}
		});

		clearTimeout(timer);
		timer = setTimeout(eval("right_arrow_click"), "6000");
	}

	/*Banner animations*/
	jQuery('.divBannerImg').click(function () {
		if (isChangingBanner) {
			return;
		}
		clearTimeout(timer);
		var jqThis = jQuery(this);
		var jqBannerVideo = jqThis.parent().children('.bannerVideo');
		var strBannerVideoInnerHtmlBackup = jqBannerVideo.data("htmlBackup") || "";
		jqBannerVideo.show();

		window.setTimeout(function () {
			jqBannerVideo.html(strBannerVideoInnerHtmlBackup);
			jqBannerVideo.show();
			jqBannerVideo.find(">div").show();
			VideoJS.setupAllWhenReady();
		}, 1);

		jQuery('#closeVideoBtn').show();
		jQuery('#bgOverlay').show();
		jQuery('#bgOverlay').css('z-index', '9');
		jQuery('#bgOverlay').stop().animate({ 'opacity': 0.8 }, 300);
	});

	jQuery('#closeVideoBtn').click(function () {
		jQuery(this).hide();
		var jqBannerVideo = jQuery('.bannerVideo');
		jqBannerVideo.hide();
		jqBannerVideo.html("<span></span>");
		jQuery('#bgOverlay').stop().animate({ 'opacity': 0 }, 500);
		jQuery('#bgOverlay').hide('fast');
		timer = setTimeout(eval("right_arrow_click"), "6000");
	});

	OnLoad();

});