/*
	Maritime
	---------
*/
var Azexis = Azexis || {};

Azexis.gallery = function(id){
	this.id = id;
	
	// get elements
	this.nextButton = $(this.id + ' .nextButton');
	this.previousButton = $(this.id + ' .previousButton');
	this.mask = $(this.id + ' .mask');
	this.slide = $('ul', this.mask);
	
	// for use in scrolling
	this.scrollDistance = 0;
	
	this.next = function(){
		var pos = this.slide.position().left;
		if (-pos + this.mask.outerWidth() < this.slide.outerWidth()) {
			pos -= this.mask.outerWidth();
		}
		this.scrollTo(pos);
	}
	
	this.previous = function(){
		var pos = this.slide.position().left;
		if (pos < 0) {
			pos += this.mask.outerWidth();
		}
		this.scrollTo(pos);
	}
	
	this.scrollTo = function(position){
		var self = this;
		this.slide.animate({left: position}, 500, "swing", function() {
			// Remove scroll arrows if we have reached the edge.
			// Remove scroll arrows if we have reached the edge.
			var pos = self.slide.position().left;
			
			if (-pos + self.mask.outerWidth() < self.slide.outerWidth()) {
				$('a', self.nextButton).addClass('active');
			} else {
				$('a', self.nextButton).removeClass('active');
			}
			
			if (pos < 0) {
				$('a', self.previousButton).addClass('active');
			} else {
				$('a', self.previousButton).removeClass('active');
			}
		});
	}
	
	this.select = function(obj){
		$('li', this.mask).each(function(){
			$(this).removeClass('active');
		});
		$(obj.parentNode).addClass('active');
		
		$(this.id + ' .photo:first img').attr('src', $(obj).attr('href'));
	}
	
	this.setup = function(){
		// format the images into one long horizontal list
		var self = this;
		var items = $('li', this.mask);
		var itemsWidth = 0;
		var itemsHeight = 0;
		
		items.each(function() {
			itemsWidth += $(this).outerWidth();
			if($(this).outerHeight() > itemsHeight) itemsHeight = $(this).outerHeight();
			
			var link = $('a:first', this);
			link.click(function(e){
										e.preventDefault;
										self.select(this); 
										return false;
										});
		});
		
		$('li:first', this.mask).addClass('active');
		
		// set-up the mask
		this.mask.css({
					  	'width': this.mask.outerWidth(),
						'height': itemsHeight,
						'position': 'relative',
						'overflow': 'hidden'
					   });
	
		// now set the width of the container
		this.slide.css({
					   'width': itemsWidth,
					   'position': 'absolute'
					   });
		
		// calculate the scroll distance
		this.scrollDistance = itemsWidth - this.mask.outerWidth();
		if(this.scrollDistance > 0){
			
			// display the next and previous buttons
			this.previousButton.css('display', 'block');
			this.previousButton.click(function(e){
											   e.preventDefault;
											   self.previous();
											   return false;
											   });
			this.nextButton.css('display', 'block');
			this.nextButton.click(function(e){
										   	   e.preventDefault;
											   self.next();
											   return false;
											   });
			this.scrollTo(0);
		}
	}
}

$(document).ready(function() {
	var gallery = new Azexis.gallery('#Gallery').setup();
});