/*
 * jQuery Backstretch plugin with background transition
 *
*/

var backgroundTransition = function(imageNames, linkNames, linkGetRequest){
	//background transition time in seconds
	var backgroundTransitionTime = 5;

	//link name fade in time in MS
	var linkNameFadeIn = 700;

    //link name fade out time in MS
    var linkNameFadeOut = 300;

    //image fade out time in MS
     var imageFadeOut = 200;

	//images to display as background
	var backgroundElements = imageNames;

	//spinner reference
	var spinner = $('#mv-loader-spinner');

	//background images preloader
	var bgPreloadedImages = [];
	var bgImagesPreload = function(){
		for(var i=0; i<backgroundElements.length; i++){
			bgPreloadedImages[i] = new Image();
			bgPreloadedImages[i].src = backgroundElements[i].src;
		}
	};


	var transition = (function(){
		var backgroundTransitionTimeMS =  backgroundTransitionTime * 1000;
		var timeout1;
		var timeout2;
		var resumeTrick;
		var intervalHandler = null;
		var counter = 0;
		var imgQty = backgroundElements.length;
		var position = 0;
		var remaining;

		var changeThings = function(){
			//time transition started
			resumeTrick = new Date().getTime();
			//how many transition (total)
			counter++;
			//position of current transition (infinite circular)
			position = counter % imgQty;


            $('#backstretch').fadeOut(imageFadeOut, function(){
                spinner.show();
                $('#backstretch').remove();
    			$.backstretch(backgroundElements[position]);
                $('#backstretch img').bind('load', function (){
                    spinner.hide();
                });
            });

			//change link name
			$('#link-menu-nautica-link-yacht a').fadeOut(linkNameFadeOut,
				function(){
					$('#link-menu-nautica-link-yacht a').text(linkNames[position]);
					$('#link-menu-nautica-link-yacht a').fadeIn(linkNameFadeIn);
				}
			);

			//change Link href
			$('#link-menu-nautica-link-yacht a').attr('href', linkGetRequest[position]);

		};

		//public methods for transition
		return{
			init: function(){

                resumeTrick = new Date().getTime();

				//initialize background
				$('#backstretch').empty();
				$.backstretch(backgroundElements[position]);

                //initialize link name and href
                $('#link-menu-nautica-link-yacht a').text(linkNames[position]);
                $('#link-menu-nautica-link-yacht a').attr('href', linkGetRequest[position]);

				remaining = backgroundTransitionTimeMS;
				this.start();
			},
			start: function(){
				remaining = backgroundTransitionTimeMS;
				intervalHandler = setInterval(changeThings, remaining);
			},
			restart : function(){
				//user has blocked animation, so we do one timeout with remaining time for next transition
				// and another one to start interval again with standard interval time (setTimeout hasn't callback associated :( )
				timeout1 = setTimeout(changeThings, remaining);
				timeout2 = setTimeout(function(){
					remaining = backgroundTransitionTimeMS;
					intervalHandler = setInterval(changeThings, remaining);
				},remaining)

			},
			stop : function(){
				//clear interval of images background transition
				clearInterval(intervalHandler);
				clearTimeout(timeout1);
				clearTimeout(timeout2);
				//calculate remaining time for next transition, so we don't restart the timer
			    remaining = backgroundTransitionTimeMS - (new Date().getTime() - resumeTrick);
			}
		};
	})();


	//initialize elements
	var init = (function(){

		bgImagesPreload();
		transition.init();

	})();

	//link onHover behaviours
	$('#link-menu-nautica-link-yacht').mouseenter(function(){
		transition.stop();
	});

	$('#link-menu-nautica-link-yacht').mouseleave(function(){
		transition.restart();
	});
};