/*
 * Integration of jQuery Backstretch plugin and jQuery jCarouselplugin,
 * 
*/

$(document).ready(function(){
    
	//background transition time in seconds
	var backgroundTransitionTime = 7;
	
	//images to display as background
    var backgroundElements = [
                              'img-bg-loop/sfondo_macchina.jpg',
                              'img-bg-loop/img1.jpg',
                              'img-bg-loop/img2.jpg', 
                              'img-bg-loop/img3.jpg', 
                              'img-bg-loop/img4.jpg',
                              'img-bg-loop/img5.jpg',
                              'img-bg-loop/img6.jpg', 
                              'img-bg-loop/img7.jpg',
                              'img-bg-loop/img8.jpg'
                              ];

    //entire menu block
    var carouselMenu = $('.carousel-menu');
    var linksContainer = $('#text-links-container');
    var leftLink;
    var leftLinkSpan;
    var preloadedImages = [];
    var bgPreloadedImages = [];
    var elementsQueue = [];
    
    var spinner = $('#mv-loader-spinner');
        
    //transition of background images
    var bgTransitionCounter = 1;
    var imgQty = backgroundElements.length;
	var intervalHandler = setInterval(function(){	
		var position = bgTransitionCounter % imgQty;
		//change BG
        $('#backstretch').remove();
        spinner.show();
        $.backstretch(backgroundElements[position]);
        
        $('#backstretch img').bind('load', function (){
        	//consle.log('loaded');
        	spinner.hide();
        });
        bgTransitionCounter++;
	}, (backgroundTransitionTime * 1000));
    
    
    //images preloader
    var imagesPreload = function(){
                
        var thumbs = $('.carousel-element');
        
        var iterator = 0;

        thumbs.each(function(iterator){
            preloadedImages[iterator] = new Image();
            var thumbSrc = $(this).find('img').attr('src');        
            var bgImageSrc = thumbSrc.replace('thumbs/', '');
            preloadedImages[iterator].src = bgImageSrc;
        });
    };
    
    
    //background images preloader
    var bgImagesPreload = function(){
        for(var i=0; i<backgroundElements.length; i++){
            bgPreloadedImages[i] = new Image();
            bgPreloadedImages[i].src = backgroundElements[i].src;
        }
    };

    
    
    /*
        var liAnchestor = aElement.closest('li');
        var ulAnchestor = liAnchestor.parent();
        var liAnchestors = ulAnchestor.children();
        var index = liAnchestors.index(liAnchestor);
        //console.log(index);
    */
    
    
    
    
    //get background image path from thumb image path
    var getBGImage = function(aElement){
        var thumbSrc = aElement.children('img').attr('src');
        var bgImageSrc = thumbSrc.replace('thumbs/', '');
        //console.log(bgImageSrc);
    	return bgImageSrc;
    };
        
    //transition of background
    var bgTransition = function(element){
    	//clear interval of images background transition
    	clearInterval(intervalHandler);
        var bgImage = getBGImage(element);
        //change BG
        $('#backstretch').remove();
        $.backstretch(bgImage);
    };

    var setLeftLink = function(element){
        //initialize menu text link
        leftLinkSpan.hide();
        //console.log(firstElementVisible);
        var textToShow = element.text();
        var linkHref = element.attr('href');
        var linkClass = element.attr('class');
        //console.log(linkClass);
        leftLinkSpan.text(textToShow);
        leftLink.attr('href', linkHref);
        leftLink.attr('class', linkClass);
        leftLinkSpan.show(300);
        //console.log(leftLink);

    };

    
    
    var differentElements = function(current){
        var lastElementEntered = elementsQueue[elementsQueue.length-1];
        //console.log(current[0]);
        //console.log(lastElementEntered[0]);
        return current[0] != lastElementEntered[0];
    };
        
    
    //initialize elements
    var init = function(){
    		
    	imagesPreload();
    	bgImagesPreload();
    	
        elementsQueue.push($('.carousel-element:last'));

    	//prepare left link
        leftLink = $('<a />');
        leftLinkSpan =  $('<span />');
    	linksContainer.append(leftLink);
    	leftLink.append(leftLinkSpan);
    	leftLinkSpan.hide();
    	    	
    	//initialize background
    	$('#backstretch').empty();
    	$.backstretch(backgroundElements[0]);

    	$(window).load(function(){
    		//menu fadein
        	$('#carousel-menu').fadeIn('fast');
        	
        	//initialize jCarousel
        	$('#carousel').jcarousel({
        		scroll:1,
        		wrap:'circular'
            });
        	
        	//initialize menu text link
            var link = $('.text-link-element').first();
        	setLeftLink(link);
    	});
    };
    
    
    var inTransition = false;
    
    init();
    
    //jCarousel onHover behaviour
    $('.carousel-element').mouseenter(function(){
    	//console.log($(this)[0]);
    	var different = differentElements($(this));
    	//console.log(different);
    	if(!inTransition && different){
    		inTransition = true;
    		//console.log("in Transition");
    		bgTransition($(this));
    		setLeftLink($(this).siblings('.text-link-element'));
    		inTransition = false;
    		//console.log("not in Transition");
    	}
    });


    $('.carousel-element').mouseleave(function(){
        elementsQueue.push($(this));
    });
});