$(document).ready(function(){

    /* This code is executed after the DOM has been completely loaded */

    var totWidth=0;
    var positions = new Array();
	var actual = 0;
    $('#slides .slide').each(function(i){

        /* Loop through all the slides and store their accumulative widths in totWidth */

        positions[i]= totWidth;

        totWidth += $(this).width();

        /* The positions array contains each slide's commulutative offset from the left part of the container */

 
        if(!$(this).width())
        {
            alert("Please, fill in width & height for all your images!");
            return false;
        }
    });
 
    $('#slides').width(totWidth);
    /* Change the cotnainer div's width to the exact width of all the slides combined */
	
    $('#menu ul ul li a').click(function(e){

        /* On a thumbnail click */
        $('li.menuItem').removeClass('act').addClass('inact');
        $(this).parent().addClass('act');
		
        var pos = $(this).parent().prevAll('.menuItem').length;
	
		var tiempo = Math.abs(positions[actual] - positions[pos])/3;
		//reasingnamos el anterior
		actual = pos;
        $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},tiempo);

        /* Start the sliding animation */

        e.preventDefault();

        /* Prevent the default action of the link */
    });

    $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
    /* On page load, mark the first thumbnail as active */

});

function automatizarOctoflash(){
	octoflash();
	setTimeOut('automatizarOctoflash', 4000);
}

function octoflash(){
	if ($('#flashes .flash:visible').length>1){
		$('#flashes .flash:visible').first().animate({width:0},'slow', function(){
			$('#flashes .flash:visible').first().hide();
		});
		
	}else{
		$('#flashes .flash').show(function (){
			$('#flashes .flash').animate({width:'600px'},'slow');
		})
		
	}
}