/// <reference path="../ScriptReference/jquery-1.5.2.js"/>

/*
 * jQuery UI PlayerAskPanel
 *
 * Depends:
 *   jquery.ui.core.js
 *   jquery.ui.widget.js
 *   Mediasite.Player.Localization.js
 *
 */

(function ($) {
	$.widget("ui.playercaptionpanel", {
		options: {
			ids: {
				slider: 'ui-playercaptionpanel-slider'

			},
			classes: {
				captionPanel: 'ui-playercaptionpanel',
				captionItem: 'ui-playercaptionpanel-item',
				roundedCorner: 'ui-corner-all'
			},
			presentation: null,
			fadeSpeed: 'normal'
		},

		_setOption: function (key, value) {
			var self = this,
                o = self.options;

			o[key] = value;

		},

		_create: function () {
			var self = this,
                o = self.options;

			self.element.addClass(o.classes.captionPanel);

			var markup = '<div id="' + o.ids.slider + '"></div>';

			$(markup).appendTo(self.element);

		},

		updateLayout: function () {
			var self = this,
                o = self.options;



		},

		destroy: function () {
			this.element.removeClass(o.classes.captionPanel);

			this.divMarkup.remove();
		},

		_init: function () {
			var self = this,
                o = self.options;


		},

		updateCaption: function (caption) {
			var self = this,
				o = self.options;
			var $slider = $('#' + o.ids.slider)

			o.currentCaption = caption;

			self.slideCaption(caption);

		},

		show: function () {

			var self = this,
				o = self.options;
			$('.' + o.classes.captionPanel)
				.stop(true, true)
				.css('visibility', 'visible')
				.animate({ opacity: 1 }, o.fadeSpeed);
		},

		hide: function () {
			var self = this,
				o = self.options;
			$('.' + o.classes.captionPanel)
				.stop(true, true)
				.animate({ opacity: 0 }, o.fadeSpeed, function () { $('.' + o.classes.captionPanel).css('visibility', 'hidden'); });
		},

		slideCaption: function (item) {
			var self = this,
				o = self.options;

			if (Modernizr.csstransforms3d) {
				self.cssSlideCaption(item);
			}
			else {
				self.jqSlideCaption(item);
			}

		},

		jqSlideCaption: function (item) {
			var self = this,
				o = self.options;

			var markup = '<div class=' + o.classes.captionItem + '>' + item + '</div>';
			var $slider = $('#' + o.ids.slider);
			var sHeight = 0;
			$.each($('.' + o.classes.captionItem), function (i) {
				sHeight += $(this).height();
			});
			$(markup).appendTo($slider);
			var iHeight = 0
			$.each($('.' + o.classes.captionItem), function (i) {
				iHeight += $(this).height();
			});
			iHeight = sHeight - iHeight;
			$('.' + o.classes.captionItem).css("position", "absolute");
			$('.' + o.classes.captionItem).stop(true, true).animate({ top: ['+=' + iHeight, 'swing'] }, 1500);

			if ($('.' + o.classes.captionItem).length > 4) {
				$($('.' + o.classes.captionItem)[0]).remove();
			}
		},

		cssSlideCaption: function (item) {
			var self = this,
				o = self.options;

			var markup = '<div class=' + o.classes.captionItem + '>' + item + '</div>';
			var $slider = $('#' + o.ids.slider)
			var sHeight = $slider.height();

			$ctrl = $(markup);
			$ctrl.appendTo($slider);
			var iHeight = $slider.height() - sHeight;

			$('.' + o.classes.captionItem).css("position", "absolute");

			var heights = new Array();
			var totalHeight = 0;
			$.each($('.' + o.classes.captionItem), function (i) {
				totalHeight += $(this).height();
			});
			$.each($('.' + o.classes.captionItem), function (i) {
				var translate = 'translate3d(0px,-' + (totalHeight + 3) + 'px,0px)'
				$(this).css({ "-moz-transform": translate, '-webkit-transform': translate });
				totalHeight -= $(this).height();
			});


			$('.' + o.classes.captionItem)
			if ($('.' + o.classes.captionItem).length > 4) {
				$($('.' + o.classes.captionItem)[0]).remove();
			}

		}




	});
})(jQuery);