$(document).ready(function () {
	
	
	$('a[rel="big_image"]').each(function () {
		$(this).fancybox();
	});

	var header_controller = new function () {
		
		var self			= this;
		
		var container, buttonContainer;
		var buttons;
		var main;
		
		var _construct = function () {
			container		= $('div.header_controller');
			$(container).css('height', '240px');
			$(container).css('width', '661px');
			buttonContainer	= $(container).find('div#controls');
			
			_setObjects();
			
			return;
		};
		
		var _setObjects = function () {
			main = new header_controller_mainImage(self, $(container).find('div.main_image'));
		
			buttons = [];
			$(buttonContainer).find('li').each(function () {
				buttons.push(new header_controller_button(self, $(this), (($(this).hasClass('active'))? true : false)));
			});
			return;
		};
		
		this.reset = function () {
			for ( var i = 0; i < buttons.length; i++ ) {
				buttons[i].deactivate();
			}
			return;
		};	
		
		this.setImage = function (src) {
			main.changeImage(src);
		};
		
		
		/**
		 * Objects
		 */
		 
		 var header_controller_button = function (parent, object, state) {
			
			var self			= this;
		 
			var _construct = function () {
				_setEvents();
				
				return;
			};
			
			var _setEvents = function () {
				$(object).mouseover(function () {
					if (!state) {
						parent.reset();
						_activate();
					}
					
					return false;
				});
				return;
			};
			
			var _activate = function () {
				$(object).addClass('active');
				parent.setImage($(object).find('a').attr('rel'));
				state = true;
				return;
			};	
			
			var _deactivate = function () {
				if (state) {
					state = false;
					$(object).removeClass('active');
				}
				return;
			};
			
			_construct();
			return {
				deactivate: function () {
					_deactivate();
				},
				activate: function () {
					_activate();
				}
			};
		 };
		 
		 var header_controller_mainImage = function (parent, object) {
			
			var self			= this;
			
			var img;
		 
			var _construct = function () {
				_setup();
			};
			
			var _setup = function () {
				$(object).css('width', '473px');
				$(object).css('height', '240px');
				$(object).css('overflow', 'hidden');
				
				img = $(object).find('img').clone();
				
				return;
			};
			
			var _makeNewImage = function (src) {
				var oldImage = $(object).find('img');
				var newImage = $(img).clone();
				
				$(oldImage).addClass('old');
				
				$(object).append($(newImage));
				$(newImage).addClass('new');
				$(newImage).attr('src', src);
				$(newImage).css('marginLeft', '-' + $(object).width() + 'px');
				$(newImage).css('marginTop', '-' + $(object).height() + 'px');
				
				$(oldImage).animate({
					marginLeft: $(object).width() + 'px'
				}, {
					duration: 'slow',
					queue: false,
					complete: function () {
						$(oldImage).remove();
					}	
				});
				$(newImage).animate({
					marginLeft: '0px'
				}, {
					duration: 'slow', 
					complete: function () {
						$(newImage).css('marginTop', '0px');
						$(newImage).removeClass('new');
						$(newImage).addClass('old');
					}
				});
				return;
			};
			
			_construct();
			return {
				changeImage: function (src) {
					_makeNewImage(src);
				}
			};
		 };
		 
		
		_construct();
	}();
	
});