/**
 * @author Kasper
 */

// UI
function UI(){
	this.me = "ui";
	this.objects = [];
}

UI.prototype = {
	// INIT
	init:function(){
	
	},
	
	// SLIDER
	createNewSlider:function(name){
		var slider = new Slider();
		slider.name = name;
		slider.init();
		
		this.objects.push({object:slider, name:slider.name});
		return slider;
	},
	
	// GENERIC
	getObjectByName:function(name){
		var obj;
		
		for(var i = 0; i<this.objects.length; i++){
			if(name == this.objects[i].name){
				obj = this.objects[i];
			}
		}
		
		return obj;
	},
	
	toString: function() { 
  		return this.me; 
	}
}

stijlfigurant.ui = new UI();

// SLIDER
function Slider(){
	this.me = "ui.slider";
	this.name;
	
	// GLOBAL PUBLIC VARIABLES
	this.div;
	this.items;
	this.itemWidth = 0;
	this.nextElement;
	this.prevElement;
	this.container;
	this.slideIndex = 0;
	this.counter;
	this.caption;
	this.itemNavigation;
	
	this.playpause;
	
	this.autoPlay = false;
	this.isPlaying = false;
	this.playLoop = false;
	
	this.initialOffset = 0;
	this.slideTime = 2500;
}

Slider.prototype = {	
	// INIT
	init:function(){
		this.container = this.div.find(".container");
		this.container.width(this.items.size() * this.itemWidth);
		
		var sliderName = this.name;
		
		if(this.div.find(".autoPlay").val() == "true"){
			this.isPlaying = true;
			this.autoPlay = true;
		}
		
		if (this.nextElement) {
			this.nextElement.bind("mousedown", {
				_this: this
			}, this.onNextDown);
		}
		
		if(this.prevElement){
			this.prevElement.bind("mousedown", {
				_this: this
			}, this.onPrevDown);
		}
		
		if (this.counter) {
			this.counter.html(this.slideIndex+1 + "/" + this.items.size());
		}
		
		if(this.caption){
			this.caption.html( this.items.eq(0).find(".caption").attr("value") );
		}
		
		if(this.itemNavigation){
			this.itemNavigation.find(".nav-item").bind("mousedown", {_this:this}, this.onNavItemDown);
		}
		
		
		if (this.items.size() > 1) {
		
			if (this.autoPlay) {
				var _this = this;
				
				window.setTimeout(function(){
					_this.play(_this)
				}, this.initialOffset);
			}
			
			if (this.playpause) {
				this.playpause.find(".play").bind("mousedown", {
					_this: this
				}, this.onPlayDown);
				this.playpause.find(".pause").bind("mousedown", {
					_this: this
				}, this.onPauseDown);
				
				this.updateUI();
			}
			
		} else {
			this.itemNavigation.css("display", "none")
		}
		
		
	},
	
	// NEXT EVENT
	onNextDown:function(event){
		var _this = event.data._this;
		
		if (_this.slideIndex < _this.items.size()-1 ) {
			_this.slideIndex += 1;
		} else {
			_this.nextElement.addClass("disabled");
		}
		
		_this.slide();
	},
	
	// PREV EVENT
	onPrevDown:function(event){
		var _this = event.data._this;
		
		if(_this.slideIndex > 0) {
			_this.slideIndex -= 1;
		}
		 
		_this.slide();
	},
	
	// ITEM NAVIGATION
	onNavItemDown:function(event){
		var _this = event.data._this;
		
		_this.pause();
		
		_this.slideIndex = $(event.currentTarget).index();
		_this.slide();
	},
	slide:function(){
		this.container.delay(80).animate({
			marginLeft: this.slideIndex * -this.itemWidth
		}, 250);
		
		this.updateUI();
		
		
	},
	
	// UPDATING ARROW ELEMENTS
	updateUI:function(){
		if (this.prevElement) {
			if (this.slideIndex == 0) { this.prevElement.addClass("disabled"); } else { this.prevElement.removeClass("disabled"); }
		}
		
		if (this.nextElement) {
			if (this.slideIndex == this.items.size() - 1) { this.nextElement.addClass("disabled");	} else { this.nextElement.removeClass("disabled");	}
		}
		
		if(this.counter){
			this.counter.html(this.slideIndex+1 + "/" + this.items.size());
		}
		
		if(this.caption){
			this.caption.html( this.items.eq(this.slideIndex).find(".caption").attr("value") );
		}
		
		if(this.itemNavigation){
			this.itemNavigation.find(".nav-item").removeClass("active");
			this.itemNavigation.find(".nav-item").eq(this.slideIndex).addClass("active");
		}
		
		if(this.playpause){
			if(this.isPlaying){
				this.playpause.find(".play").css("display", "none");
				this.playpause.find(".pause").css("display", "block");
			} else {
				this.playpause.find(".play").css("display", "block");
				this.playpause.find(".pause").css("display", "none");
			}
		}
	},
	
	play:function(_this){
		
		if (_this.isPlaying) {
			_this.slideIndex++;
			_this.slide();
			
			console.log("hoi!");
			
			window.setTimeout(function(){_this.playNext(_this)}, _this.slideTime);
		}
	},
	pause:function(){
		if (this.isPlaying) {
			this.isPlaying = false;
		}
		
		this.playpause.find(".play").css("display", "block");
		this.playpause.find(".pause").css("display", "none");
	},
	
	playNext:function(_this){
		
		
		
		if (_this.isPlaying) {
			if (_this.playLoop) {
			
				if (_this.slideIndex == _this.items.size() - 1) {
					_this.slideIndex = -1;
				}
				
				_this.play(_this);
			} else if (_this.slideIndex < _this.items.size() - 1) {
				// happens when playloop = false
				_this.play(_this);
			} else if (_this.slideIndex == _this.items.size() - 1) {
				// happens when playloop = false, return to beginning
				_this.isPlaying = false;
				
				_this.slideIndex = 0;
				_this.slide();
			}
		}
	},
	
	onPlayDown:function(event){
		var _this = event.data._this;
		
		
		
		if (!_this.isPlaying) {
			_this.isPlaying = true;
			_this.play(_this);
		}
	
		_this.playpause.find(".play").css("display", "none");
		_this.playpause.find(".pause").css("display", "block");
	},
	onPauseDown:function(event){
		var _this = event.data._this;
		
		_this.pause();
	}
}

$(document).ready(function(){
	stijlfigurant.ui.init();
});