// globais
var currentPosition;
var currentPosition2;
var slideWidth;
var slideWidth2;
var slides;
var slides2;
var numberOfSlides;
var numberOfSlides2;
var defineNavegacaoThumb;

$(document).ready(function(){
	//console.log('LOADED');

    $('.slide img').each(function () {
    	$(this).load(function() {
	    	//console.log($(this).attr("id"));
	    	var id = $(this).attr("id").replace(/quadro_/, '');
	    	//console.log(id);
	   		sombra(id);
    	});
    });

   	sombra = function(id) {
		
		var divID = id;
			
		$('#slidesContainer').find("#quadro_"+id).each(function () {		
		
			
			// dimens›es
			var w = $(this).attr("width");
			var h = $(this).attr("height");

			//alert(w + "x" + h);
				
			$(this).wrap('<div class="container"></div>');
			$(this).wrap('<div id="box-'+ divID +'"></div>');
			
			$('#sombra-esquerda-' + divID + " img").css("top","0");
			$('#sombra-direita-' + divID + " img").css("top","0");
			$('#sombra-topo-' + divID + " img").css("top","0");
			$('#sombra-baixo-' + divID + " img").css("top","0");

			$('#sombra-esquerda-' + divID).css("width","25px");
			$('#sombra-direita-' + divID).css("width","46px");
			$('#sombra-topo-' + divID).css("height","33px");
			$('#sombra-baixo-' + divID).css("height","35px");
		
			$(this).before('<div id="sombra-esquerda-'+ divID +'" class="sombras"><img src="img/sombra-esquerda.png" /></div>');						
			if(w <= 300) {
				$(this).after('<div id="sombra-baixo-'+ divID +'" class="sombras"><img src="img/sombra-baixo-menor.png" /></div>');
				$(this).before('<div id="sombra-topo-'+ divID +'" class="sombras"><img src="img/sombra-topo-menor.png" /></div>');	
			} else {
				$(this).before('<div id="sombra-topo-'+ divID +'" class="sombras"><img src="img/sombra-topo.png" /></div>');	
				$(this).after('<div id="sombra-baixo-'+ divID +'" class="sombras"><img src="img/sombra-baixo.png" /></div>');
			}
			
			$(this).after('<div id="sombra-direita-'+ divID +'" class="sombras"><img src="img/sombra-direita.png" /></div>');
			
			var wEsq = 25;
			var wDir = 46;
			var hTopo = 33;
			var hBaixo = 35;
			
			$('#sombra-esquerda-' + divID + " img").css("height", h).css("left","0").css("margin-top",hTopo).css("width",wEsq);
			$('#sombra-direita-' + divID + " img").css("height", h).css("right","0").css("margin-top",hTopo).css("width",wDir);
			
			var larguraContainer = w+wEsq+wDir;
			
			//alert(w + "x" + wEsq  + "x" + wDir);
						
			$('#box-' + divID).css({
				"width":larguraContainer,
				"height":h+hTopo+hBaixo,
				"position":"absolute",
				"bottom":"0",
				"left":"50%",
				"position":"absolute",
				"margin-left":-larguraContainer/2 +"px",
				"overflow":"hidden"
			});
			
			//posicionando o job no centro (vertical e horizontal) da li
			$('#box-' + divID + " .job").css("position","absolute").css("left","0").css("top","0").css("margin",hTopo +"px 0 0 "+ wEsq + "px");
			
			$('#sombra-topo-' + divID + " img").css("width", larguraContainer).css("top","0").css("height",hTopo);
			
			
			$('#sombra-baixo-' + divID + " img").css("width", larguraContainer).css("bottom","0").css("height",hBaixo);
			

			if( $(this).attr("width") < 458 ) {
				var tamanhoBaixo = $('#sombra-baixo-' + divID + " img").css("width").replace(/px/, '') - 10;
				$('#sombra-baixo-' + divID + " img").css("width",tamanhoBaixo);
				$('#sombra-baixo-' + divID + " img").css("left","3px");
				
				var tamanhoTopo = $('#sombra-topo-' + divID + " img").css("width").replace(/px/, '') - 10;
				$('#sombra-topo-' + divID + " img").css("width",tamanhoTopo);
				$('#sombra-topo-' + divID + " img").css("left","3px");	
				//alert(tamanhoBaixo);
			}//condiŤ‹o para jobs menores		
			
			divID++;
		});// fim do photo shadow
		
   	}


    currentPosition = 0;
    currentPosition2 = 0;
    slideWidth = 543;
    slideWidth2 = 89;
    slides = $('.slide');
    slides2 = $('.slide2');
    numberOfSlides = slides.length;
    numberOfSlides2 = slides2.length;
 
    // Remove scrollbar in JS
    $('#slidesContainer').css('overflow', 'hidden');
    $('#slidesContainer2').css('overflow', 'hidden');

    // Wrap all .slides with #slideInner div
    slides
        .wrapAll('<div id="slideInner"></div>')
        // Float left to display horizontally, readjust .slides width
	.css({
            'float' : 'left',
            'width' : slideWidth
        });
        
    slides2
        .wrapAll('<div id="slideInner2"></div>')
        // Float left to display horizontally, readjust .slides width
	.css({
            'float' : 'left',
            'width' : slideWidth2
        });

    // Set #slideInner width equal to total width of all slides
    $('#slideInner').css('width', slideWidth * numberOfSlides);
    $('#slideInner2').css('width', slideWidth2 * numberOfSlides2);

    // Insert controls in the DOM
    $('#slideshow')
        .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
        .append('<span class="control" id="rightControl">Clicking moves right</span>');
    $('#slideshow2')
        .prepend('<span class="control2" id="leftControl2">Clicking moves left</span>')
        .append('<span class="control2" id="rightControl2">Clicking moves right</span>');

    // Hide left arrow control on first load
    manageControls(currentPosition);
    manageControls2(currentPosition2);

    // Create event listeners for .controls clicks
    $('.control')
        .bind('click', function(){
        // Determine new position
		currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
        manageControls(currentPosition);
        // Move slideInner using margin-left
        $('#slideInner').animate({
            'marginLeft' : slideWidth*(-currentPosition)
        }, 300);
    });

    $('.control2')
        .bind('click', function(){
        // Determine new position
		currentPosition2 = ($(this).attr('id')=='rightControl2') ? currentPosition2+1 : currentPosition2-1;
        
		// Hide / show controls
        manageControls2(currentPosition2);
        // Move slideInner using margin-left
        $('#slideInner2').animate({
            'marginLeft' : slideWidth2*(-currentPosition2) 
        }, 300);
    });

    // manageControls: Hides and Shows controls depending on currentPosition
    function manageControls(position){
        // Hide left arrow if position is first slide
		if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
		// Hide right arrow if position is last slide
        if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }

    }	
    
    function manageControls2(position2){
        // Hide left arrow if position is first slide
	if(position2==0){ $('#leftControl2').hide() } else{ $('#leftControl2').show() }
	// Hide right arrow if position is last slide
	
        
	   var visivel =  (slideWidth2 * (numberOfSlides2 - position2) ) >= parseInt($('#slideshow2').css('width').replace(/px/, ''));
	   
	   //$('#rightControl2').css('display', (visivel) ? 'block' : 'none');    
        
        if(!visivel){ 
        	$('#rightControl2').hide()
        		} else { 
        	$('#rightControl2').show() 
        	
        }
    
    
    }	
	
	
   $('.slide2 a')
        .bind('click', function(){
		
    		var xpos = $(this).attr('id');
    		xpos = xpos.replace("slide-","");
    		xpos = parseInt(xpos);
    		
    		currentPosition = xpos - 1;
    		
            manageControls(currentPosition);
            // Move slideInner using margin-left
            $('#slideInner').animate({
                'marginLeft' : slideWidth*(-currentPosition)
            }, 300);
    		
    });

   	defineNavegacaoThumb = function() {
   		
	   var visivel = (slideWidth2 * (numberOfSlides2 - currentPosition2) ) >= parseInt($('#slideshow2').css('width').replace(/px/, ''));
	   
	   if (visivel) {
		   
		   $('#rightControl2').show();
		   
	   } else {
		   
		   $('#rightControl2').hide();
		   
	   }
	   
   }
   
   	defineNavegacaoThumb();
	
   	window.onresize = function() { defineNavegacaoThumb(); };
   	
   	

});