/// Slider
jQuery(function ($) {
	$.fn.slide = function () {
		var slider = new $.fn.slide.slider(this);
	}

	$.fn.slide.options = {
		changeTimeout: 5000,
		duration: 700
	}

	// Slider
	$.fn.slide.slider = function (slider) {
		this.init(slider);
	}

	$.fn.slide.slider.prototype = {
		init: function (slider) {
			this._timer = null;
			this._index = 0;
			this._width = 0;

			this._slider = slider;
			this._itemsBox = this._slider.children('.items');
			this._itemButtons = this._itemsBox.children('.item');
			this._players = [];

			var itemContentContainer = $('<div/>').prependTo(this._slider);
			this._items = this._itemButtons.map(Function.createDelegate(this, function (i, n) {
				var item = $(n);
				var o = { item: item };
				o.itemContent = $('<div class="slider_item_content" />').prependTo(itemContentContainer);

				// Get item content
				var itemsUrl = eval(item.attr('data-items'));
				var videoUrl = $.grep(itemsUrl, Function.createDelegate(this, function (url) {
					return url.match(/.flv$/);
				}))[0] || null;
				var imageUrl = $.grep(itemsUrl, Function.createDelegate(this, function (url) {
					return !url.match(/.flv$/);
				}))[0] || null;

				if (videoUrl) {
					o.itemContent.height(this._slider.height() - this._itemsBox.height());
					// FLV Video
					var player = $f(o.itemContent[0], {
						src: 'Js/flowplayer-3.2.7.swf',
						wmode: 'opaque'
					}, {
						clip: {
							url: videoUrl,
							autoPlay: false,
							autoBuffering: imageUrl == null
						},
						onMouseOver: Function.createDelegate(this, function () {
							this.stopTimer();
						}),
						onMouseout: Function.createDelegate(this, function () {
							this.startTimer();
						}),
						canvas: {
							backgroundImage: imageUrl
						}
					});
					this._players.push(player);
				} else if (imageUrl) {
					// Image
					var backGroundUrl = 'url(' + imageUrl + ')';
					o.itemContent.css({ 'background-image': backGroundUrl });
				}

				return o;
			}));

			// Fix items width
			var sliderWidth = this._itemsBox.outerWidth(true);
			var itemsWidthSum = 0;
			this._itemButtons.each(function () { itemsWidthSum += $(this).outerWidth(true); });

			// Set item width
			var avgWidth = (sliderWidth - itemsWidthSum) / this._items.length;
			this._items.each(function () {
				var paddingMargin = this.item.outerWidth(true) - this.item.width();
				var w = this.item.width() + avgWidth;
				this.item.width(w);
			});

			// On mouse over
			this._slider.bind('mousemove mouseleave', Function.createDelegate(this, function (e) {
				switch (e.type) {
					case 'mousemove':
						this.stopTimer();
						break;
					case 'mouseleave':
						this.startTimer();
						break;
				}
			}));

			// On item mouse over
			this._itemButtons.bind('mouseenter', Function.createDelegate(this, function (e) {
				switch (e.type) {
					case 'mouseenter':
						this.stopTimer();
						var idx = this._itemButtons.index(e.target);
						this.move(idx);
						break;
				}
			}));

			var selItem = this._items[this._index];
			selItem.item.addClass('selected');
			selItem.itemContent.css('opacity', 1);

			this.startTimer();
		},

		moveNext: function () {
			var isPlay = $.grep(this._players, function (n) {
				return n.isLoaded() && n.isPlaying();
			});
			if (!!isPlay.length)
				return;

			this.move(this._index + 1);
		},

		move: function (index) {
			if (index >= this._items.length) {
				index = 0;
			}
			if (index == this._index) return;
			this._index = index;

			// Stop all videos
			$.each(this._players, function () {
				this.pause();
			});

			// Move button
			this._itemButtons.stop(true, true).removeClass('selected');
			var selItem = this._items[index];
			selItem.item.addClass('selected');

			var unselected = selItem.itemContent.parent().children().filter(function (i, n) {
				return n != selItem.itemContent[0];
			});

			unselected
				.stop(true, true)
				.css('z-index', 900)
				.animate(
					{ 'opacity': 0 },
					$.fn.slide.options.duration,
					Function.createDelegate(this, function (e) {

					})
				);

			selItem.itemContent.css({ opacity: 0 })
				.stop(true, true)
				.css('z-index', 910)
				.animate(
					{ 'opacity': 1 },
					$.fn.slide.options.duration,
					Function.createDelegate(this, function () {

					})
				);
		},

		startTimer: function (stopPlayers) {
			this.stopTimer();
			var intervalFunction = Function.createDelegate(this, function () {
				this.moveNext();
			});
			this._timer = setInterval(intervalFunction, $.fn.slide.options.changeTimeout);
		},
		stopTimer: function () {
			clearInterval(this._timer);
		}
	}
});