var intervals = new Array();
var IMAGE_WIDTH = 440;
var SPEED = 10000;

function slideImages(where, index) {
	
	//slide
	var project = $('.proyecto').get(index);

	var slider = $(project).find('.images');
	
	var width = parseInt(slider.css('width'));
	var left = parseInt(slider.css('margin-left')) * where;
	
	var newLeft = left + IMAGE_WIDTH;

	if(newLeft >= width)
		var newLeft = 0;
	
	slider.animate({ 'margin-left' : (newLeft*where) + 'px' }, 500)
	
	//update navigation
	var n = newLeft/IMAGE_WIDTH;

	$(project).find('ul li').removeClass('active');
	$(project).find('ul li').get(n).className = 'active';

}

function slideImagesLeft(index) {
	slideImages(-1, index);
}


function slideImagesRight(project, interval) {
	slideImages(1, index);
}

function slideTo(projectIndex, imageIndex) {

	var project = $('.proyecto').get(projectIndex);
	var slider = $(project).find('.images');	
	
	slider.animate({ 'margin-left' : (-imageIndex*IMAGE_WIDTH) + 'px' }, 500);
	
	//update navigation
	$(project).find('ul li').removeClass('active');
	$(project).find('ul li').get(imageIndex).className = 'active';
}

$(document).ready(function() {
	
	var projects = $('.proyecto');
	
	projects.each(function(k, el) {
		
		//resize slider
		var images = $(el).find('.images img');
		$(el).find('.images').css('width', images.length * IMAGE_WIDTH);
		
		//build navigation
		if(images.length > 1) {
		
			var nav = document.createElement('ul');
			
			images.each(function(i, img) {
				
				var li = document.createElement('li');
				li.appendChild(document.createTextNode((i+1)));
				nav.appendChild(li);
				
				if(i == 0)
					li.className = 'active';
					
				li.onclick = function() {
					//clearInterval(intervals[k]);
					slideTo(k, i);
					//intervals[k] = setInterval("slideImagesLeft("+k+")", SPEED);
				}
				
			});
			
			el.appendChild(nav);
			
			$(el).find('.image').after(nav);
						
			//start auto slider
			//intervals[k] = setInterval("slideImagesLeft("+k+")", SPEED);
			
			//stop on hover
			/*
			$(el).find('.image').each(function(k2, el2) {
			
				el2.onmouseover = function() {
					clearInterval(intervals[k]);
				}
				
				el2.onmouseout = function() {
					intervals[k] = setInterval("slideImagesLeft("+k+")", SPEED);
				}
				
			})*/
			
		}

			
	})
	
});