$(document).ready(function(){
	end3rCarousel = function(id) {
		var self = this;
		self.dom = {
			core: null,
			images: null
		};
		self.data = {
			navigation: null,
			width: 450,
			imageCount: 0,
			counter: 0
		};
		
		self.init = function() {
			self.dom.core = jQuery('#' + id);
			self.dom.core.append('<div class="imageBox"><div class="image link"></div></div>');
			self.dom.images = self.dom.core.find('img');
			var navigation = $('<ul class="introArrows">');
			navigation.append('<li><span class="button left">&lt;</span></li>');
			navigation.append('<li><span class="button right">&gt;</span></li>');
			var markers = $('<ul class="introMarkers">');

			for(var i=0; i<self.dom.images.length; i++) {
				var active = (!self.data.imageCount) ? ' class="active"' : '';
				markers.append('<li'+active+'><span>o</span></li>');
				var description = '<div class="caption"><p><span></span></p></div>';
				self.data.imageCount++;
			}
			self.dom.core.append(markers);
			self.dom.core.append(description);
			self.dom.core.append(navigation);
			self.data.counter = 0;

			self.dom.core.find(".imageBox .image").attr('style','width: '+(self.data.width*(self.data.imageCount))+'px');
			var imageIndex = self.data.imageCount-1;
        
			self.dom.core.find('.right').bind('click',function(){
				if(self.data.counter == imageIndex)
					self.dom.core.find(".imageBox .image").animate({"left": "+="+(self.data.width*imageIndex)+"px"}, "slow");
				else
					self.dom.core.find(".imageBox .image").animate({"left": "-="+self.data.width+"px"}, "slow");
				self.action($(this));
			});

			self.dom.core.find('.left').bind('click',function(){
				if(self.data.counter == 0)
					self.dom.core.find(".imageBox .image").animate({"left": "-="+(self.data.width*imageIndex)+"px"}, "slow");
				else
					self.dom.core.find(".imageBox .image").animate({"left": "+="+self.data.width+"px"}, "slow");
				self.action($(this));
			});
			self.activate(self.dom.core.find('.button'));
		};

		self.activate = function(button) {
			self.dom.core.find('ul li:first-child').addClass('active');
			self.dom.core.find('.imageBox .image').html('');
			for(var i=0; i<self.dom.images.length; i++) {
				var img = $(self.dom.images[i]);
				self.dom.core.find('.imageBox .image')
					.append('<a href="./portfolio/item/'+img.attr('title')+'/"><img src="'+img.attr('src')+'" alt="'+img.attr('alt')+
						'" style="display: block;" /></a>');
			}
			self.dom.core.find('.caption p span').html($(self.dom.images[0]).attr('alt'));
		};
		
		self.action = function(button) {
			self.dom.core.find('ul li').removeClass('active');
			if(button.hasClass('left'))
				self.data.counter--;
			else if(button.hasClass('right'))
				self.data.counter++;
			self.data.counter += self.data.imageCount;
			self.data.counter %= self.data.imageCount;
			self.dom.core.find('ul li:nth-child('+(self.data.counter+1)+')').addClass('active');
			var alt = self.dom.core.find('img:nth-child('+(self.data.counter+1)+')').attr('alt');
			self.dom.core.find('.caption p span').html(alt);
		};
	};

	$('.end3rCarousel').each(function(index) {
		new end3rCarousel($(this).attr('id')).init();
	});
	window.setInterval(function(){ $('.right').click(); }, 7000);
});