$(document).ready(function() {
	$("#game_slideshow").show()
	.slideshow({ buttonSpecificClass : "element_common" })
	.find("img").show();
	
	$('.slide_item .icon_platform_link').click(function(){
		var href = $(this).attr('href');
		window.open(href);
		return false;
	});
});

// Slideshow Component
$.widget("ui.slideshow", {
	// default options
	options : {
		waitingTime : 10000,
		movingTime : 400,
		timerEnabled: true,
		buttonSpecificClass: ""
	},

	_create : function() {
		// Init properties
		this.iCurrentIndex = 0;
		this.timer = 0;
		this.arrButtons = [];
		this._animationPlaying = false;

		var self = this;
		var children = $(this.element).children("*");
		
		this.element.addClass("slideshow");
		// Init slide list
		children.wrapAll($("<div/>", {
			"class" : "list"
		}));
		
		this.divSlideList = this.element.find(".list");
		this.divSlideList.css("width", this.element.width() * children.length);
		this.divSlideList.wrap($("<div/>", {
			"class" : "list_container"
		}));
		
		// Init Slide items
		children.each(function(index) {
			$(this).addClass("slide_item");
			$(this).css("position", "absolute");
			$(this).css("left", $(this).width() * index);
		});

		// Arrows
		this.divArrows = $("<div/>", {
			"class" : "arrows"
		}).appendTo(this.element);

		$("<div/>", {
			"class" : "icon_arrow left " + this.options.buttonSpecificClass,
			click : function() {
				self.buttonClickHandler(self.iCurrentIndex - 1);
			}
		}).appendTo(this.divArrows);

		$("<div/>", {
			"class" : "icon_arrow right " + this.options.buttonSpecificClass,
			click : function() {
				self.buttonClickHandler(self.iCurrentIndex + 1);
			}
		}).appendTo(this.divArrows);
		
		//Navigation Buttons
		this.divButtons = $("<div/>", {
			"class" : "buttons_list"
		}).appendTo(this.element);
		var divButton;
		children.each(function(index, value) {
			divButton = ($("<div/>", {
				"id"	: "slide_button_" + $(value).attr("id"),
				"class" : "slide_button inline_block " + self.options.buttonSpecificClass,
				"button-index" : index,
				click : function() {
					self.buttonClickHandler($(this).attr("button-index"));
				}
			}));
			
			self.arrButtons.push(divButton);
			divButton.appendTo(self.divButtons);
		});
		
		
		children.each(function(index) {
			$(this).css("position", "absolute");
			$(this).css("left", $(this).width() * index);
		});

		this.setCurrentIndex(0);
		this.startTimer(this.options.waitingTime);
	},
	
	buttonClickHandler : function ( index ) {
		if( this._animationPlaying )
			return;
		
		this.setCurrentIndex(index);
		if( this.options.timerEnabled )
		{
			this.stopTimer();
			this.startTimer(this.options.waitingTime);
		}
	},
	
	enableTimer: function()
	{
		this.startTimer();
		this.options.timerEnabled = true;
	},
	
	disableTimer: function()
	{
		this.stopTimer();
		this.options.timerEnabled = false;
	},	
	
	startTimer : function(time) {
		var self = this;
		if (this.timer > 0)
			return;
		this.timer = setInterval(function() {
			self.setCurrentIndex(self.iCurrentIndex + 1);
		}, time);
	},

	stopTimer : function() {
		if (this.timer == 0)
			return;
		clearInterval(this.timer);
		this.timer = 0;
	},

	setCurrentIndex : function(index) {
		index = parseInt(index);
		var children = $(this.divSlideList).children("*");
		var lastIndex = children.length - 1;
		if (index > lastIndex)
			index = 0;
		if (index < 0)
			index = lastIndex;
		if( 0 == children.length)
			return;

		var oldButton = this.arrButtons[this.iCurrentIndex];
		var currentButton = this.arrButtons[index];
		
		var oldElement = children[this.iCurrentIndex];
		var currentElement = children[index];
		this.iCurrentIndex = index;
		
		if( oldButton )
			oldButton.removeClass("selected");
		currentButton.addClass("selected");

		// animation
		var self = this;
		this._animationPlaying = true;		
		$(this.divSlideList).animate( {
			left : -1 * this.iCurrentIndex * $(currentElement).width()
		}, this.options.movingTime, function() {
			self._animationPlaying = false;
		});
	},

	destroy : function() {
	}
});