var oriTopSlide = oriTopSlide || {};

oriTopSlide.CONF = {
	ROTATION_INTERVAL: 6000,
	BUTTON_CURRENT_BG_SRC: 'share/img/slider/rb_btn_active.gif',
	BUTTON_NORMAL_BG_SRC: 'share/img/slider/rb_btn_inactive.gif',
	BUTTON_HEIGHT: 68,
	SLIDES_ID: '#imageSlider #rb-image-container #rb-images',
	BUTTONS_ID: '#imageSlider #rb-buttons-container #rb-buttons'
};

oriTopSlide.start = function() {
	var model   = new oriTopSlide.Model();
	var slides  = new oriTopSlide.Slides(model, $(oriTopSlide.CONF.SLIDES_ID));
	var buttons = new oriTopSlide.Buttons(model, $(oriTopSlide.CONF.BUTTONS_ID));
	var rotator = new oriTopSlide.Rotator(model, oriTopSlide.CONF.ROTATION_INTERVAL);
	rotator.start();
};

$(function() {
	oriTopSlide.start();
});



oriTopSlide.Model = function() {
	this.currentIndex = 0;
	this.numElements = 0;
	this.shouldRotate = true;
};

oriTopSlide.Model.prototype = {
	updateIndex: function(value) {
		if(value < 0) {
			value = this.numElements - 1;
		}
		else if (value >= this.numElements) {
			value = 0;
		}
		
		this.currentIndex = value;
		this._notifyChange();
	},
	
	setShouldRotate: function(value) {
		this.shouldRotate = value;
		this._notifyChange();
	},
	
	_notifyChange: function() {
		$(this).change();
	}
};




oriTopSlide.Slides = function(model, container) {
	this.model = model;
	this.container = container;
	this.elements = $(container).children();
	this.currentElement = null;
	this._currentIndex = -1;
	
	this.init();
	this.update();
};

oriTopSlide.Slides.prototype = {
	init: function() {
		var self = this;
		
		this._initElements();
		
		$(this.container).mouseover(function() {
			self.model.setShouldRotate(false);
		});
		
		$(this.container).mouseout(function() {
			self.model.setShouldRotate(true);
		});
		
		this.model.numElements = this.elements.length;
		
		$(this.model).change(function() {
			self.update();
		});
	},
	
	_initElements: function() {
		$(this.container).css('position', 'relative');
		
		$(this.elements).each(function() {
			$(this).css('position', 'absolute');
			$(this).hide();
		});
	},
	
	update: function() {
		if(this.model.currentIndex == this._currentIndex) {
			return;
		}
		
		this._currentIndex = this.model.currentIndex;
		
		if(this.currentElement) {
			$(this.currentElement).stop();
			$(this.currentElement).fadeTo(200, 0);
			$(this.currentElement).css('z-index', 0);
		}
		
		this.currentElement = this.elements[this._currentIndex];
		$(this.currentElement).queue([]);
		$(this.currentElement).stop();
		$(this.currentElement).fadeTo(200, 1);
		$(this.currentElement).css('z-index', 1);
	}
};




oriTopSlide.Buttons = function(model, container, rotator) {
	this.model = model;
	this.container = container;
	
	this.elementHTMLList = [];
	var self = this;
	$(this.container).children().each(function() {
		self.elementHTMLList.push('<li>' + $(this).html() + '</li>');
	});
	this.numElements = this.elementHTMLList.length;
	this._currentIndex = -1;
	
	this.init();
};

oriTopSlide.Buttons.prototype = {
	BUTTON_HEIGHT: oriTopSlide.CONF.BUTTON_HEIGHT,
	CURRENT_BG: oriTopSlide.CONF.BUTTON_CURRENT_BG_SRC,
	NORMAL_BG: oriTopSlide.CONF.BUTTON_NORMAL_BG_SRC,
	
	init: function() {
		var self = this;
		
		this._initElements();
		
		$(this.model).change(function() {
			self.update();
		});
		
		var elementHTML =
			[this._getElementAt(-2),
			 this._getElementAt(-1),
			 this._getElementAt( 0)].join('');
		$(this.container).html(elementHTML);
		
		this.update();
	},
	
	_initElements: function() {
		var self = this;
		
		$(this.container).mouseout(function() {
			self.model.setShouldRotate(true);
		});
	},
	
	update: function() {
		if(this.model.currentIndex == this._currentIndex) {
			return;
		}
		var self = this;
		
		var diff = this.model.currentIndex - this._currentIndex;
		if(diff < -1) {
			diff = 1;
		}
		else if(diff > 1) {
			diff = -1;
		}
		var moveForward = (diff == 1);
		
		this._currentIndex = this.model.currentIndex;
		var newElement = this._getElementAt(this._currentIndex + diff);
		var newHTML = (moveForward) ? 
			$(this.container).html() + newElement :
			newElement + $(this.container).html();
			
		$(this.container).html(newHTML);
		
		
		this._removeCurrent($(this.container).children()[(moveForward) ? 1 : 2]);
		this._setCurrent($(this.container).children()[(moveForward) ? 2 : 1]);
		
		var callback = function() {
			$(self.container).css({
				marginTop: '0px'
			});
			
			var elementHTML = 
				[self._getElementAt(self._currentIndex-1),
				 self._getElementAt(self._currentIndex),
				 self._getElementAt(self._currentIndex+1)].join('');
			$(self.container).html(elementHTML);
			
			self._setCurrent($(self.container).children()[1]);
			
			$(self.container).children().each(function(index) {
				if(index != 1) {
					$(this).children()[0].onclick = null;
				}
				
				$(this).click(function(e) {
					if(index != 1) {
						e.preventDefault();
						self.model.updateIndex(self._currentIndex + index - 1);
					}
				});
			});
		};
		
		var dest;
		if(moveForward) {
			dest = -this.BUTTON_HEIGHT;
		}
		else {
			$(this.container).css({
				marginTop: '-' + this.BUTTON_HEIGHT + 'px'
			});
			dest = 0;
		};
		
		$(this.container).animate({
			marginTop:dest + 'px'
		}, 500, 'swing', callback);
	},
	
	_setCurrent: function(element) {		
		$(element).css({
			backgroundImage: 'url(' + this.CURRENT_BG + ')'
		});
	},
	
	_removeCurrent: function(element) {
		$(element).css({
			backgroundImage: 'url(' + this.NORMAL_BG + ')'
		})
	},
	
	_getElementAt: function(index) {
		index = this._modifyIndex(index);
		return this.elementHTMLList[index];
	},
	
	_modifyIndex: function(index) {
		if(index < 0) {
			index = this.numElements + (index % this.numElements);
		}
		return (index % this.numElements);
	}
};



oriTopSlide.Rotator = function(model, interval) {
	this.model = model;
	this.interval = (interval) ? interval : 2000;
	this.init();
};

oriTopSlide.Rotator.prototype = {
	init: function() {
		var self = this;
		$(this.model).change( function() {
			(self.model.shouldRotate) ?
				self.start() :
				self.stop();
		});
	},
	
	start: function() {
		if(this.intervalId) {
			clearInterval(this.intervalId);
		}
		var self = this;
		this.intervalId = setInterval(function() {
			self.increment();
		}, this.interval);
	},
	
	stop: function() {
		clearInterval(this.intervalId);
	},
	
	reset: function() {
		this.stop();
		this.start();
	},
	
	increment: function() {
		this.model.updateIndex(this.model.currentIndex + 1);
	}
};


function trace(value) {
	if(window.console && console.log) {
		console.log(value);
	}
}