// main visual

var topSlide = topSlide || {};

topSlide.setting = {
	slide_interval: 6000,
	btn_current_bg: '/images/main_visual_btn_active.gif',
	btn_default_bg: '/images/main_visual_btn_inactive.gif',
	btn_height: 62,
	main_visual_id: '#main_visual #main_visual_list #main_visual_images',
	btn_id: '#main_visual #main_visual_btn_block #main_visual_btn'
};

topSlide.start = function() {
	var model   = new topSlide.Model();
	var slides  = new topSlide.Slides(model, $(topSlide.setting.main_visual_id));
	var buttons = new topSlide.Buttons(model, $(topSlide.setting.btn_id));
	var rotator = new topSlide.Rotator(model, topSlide.setting.slide_interval);
	rotator.start();
};

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


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

topSlide.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();
	}
};


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

topSlide.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);
	}
};


topSlide.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();
};

topSlide.Buttons.prototype = {
	btn_height: topSlide.setting.btn_height,
	current_bg: topSlide.setting.btn_current_bg,
	default_bg: topSlide.setting.btn_default_bg,
	
	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.btn_height;
		}
		else {
			$(this.container).css({
				marginTop: '-' + this.btn_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.default_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);
	}
};

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

topSlide.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);
	}
}