//~~~~~~~~~~~~~~~~~~ MODAL~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

var imgTimer = null; // crossfade Rose Paul images
var moveTimer = null; // user changes mind after click
var lakeExpose = null;
var lakeTypeSelected = null;

//~~~~~~~~~~ FEATURED FADE ~~~~~~~~~~~~~~~~~~~~~~~//
var fTimerIn = null;
//var fTimerOut = null;
var maxSwap = 0;
var fTimerSwap = null;
var featureImg = "showing";

function featureFadeOut(){$('#featureImg').stop(true,true).fadeOut('slow'); featureImg = "hidden"};
function featureFadeIn(){$('#featureImg').stop(true,true).fadeIn('slow'); featureImg = "showing";};

function swapFeatured()
{
	featureFadeOut();
	if(maxSwap <= 3){
	  fTimerIn= setTimeout(' featureFadeIn()',5000);
	  maxSwap ++;
	}
	else{
		clearInterval(fTimerSwap);
		maxSwap = 0;
		featureFadeIn();
		$('#featuredPauseBtn').hide();
		$('#featuredPlayBtn').show();
		}
}

function fPlay(){
	if(featureImg == "showing"){
		swapFeatured();
		//fTimerSwap = setInterval('swapFeatured()',10000);
	}
	else{
	featureFadeIn();
	//fTimerOut = setTimeout(' featureFadeOut()',5000);
	//setTimeout("fTimerSwap = setInterval('swapFeatured()',10000);",5000);
	};
	
	//fTimerIn= setTimeout(' featureFadeIn()',5000);
	fTimerSwap = setInterval('swapFeatured()',10000);
	$('#featuredPauseBtn').show();
	$('#featuredPlayBtn').hide();
	}
	
	
function fPause(){
	clearInterval(fTimerSwap);
	clearTimeout(fTimerIn);
	$('#featuredPauseBtn').hide();
	$('#featuredPlayBtn').show();
	}
	
function setAnimations(tabCurrent){  // Kill animations when tab is not visible to save CPU
	clearTimeout(swapIn);
	clearTimeout(swapOut);
	
	if(tabCurrent == 0){
	    initMapControls();	
	};

	clearInterval(fTimerSwap);
	clearTimeout(fTimerIn);
	
	if(tabCurrent == 4){
		fPlay();
		//$('#featuredPlayBtn').hide();
		};
	
	}
	
//~~~~~~~~~~ END OF FEATURED FADE ~~~~~~~~~~~~~~~~~~~~~~~//

$(document).ready(function ()
{
    $("#pickLakeType").css('display', 'block'); // Turned off for IE delay at startup, could fix with CSS
    $('#lakeType :radio').attr('checked', '');  // Reset Radio OFF on browser refresh

    var initTop = $(window).height() / 2 - 200;
    var initLeft = $(window).width() / 2 - 200;

    $("#pickLakeType").overlay({  //Set up Overlay
        top: initTop,
        left: initLeft,
        close: $('#closeBtn'),
        closeOnClick: false,
        closeOnEscape: false,
        api: true
    }).load();

    lakeExpose = $("#pickLakeType").expose({ maskId: 'exposeMask', zIndex: 200, color: '#999', loadSpeed: 0, opacity: 0.7, closeOnClick: false, closeOnEscape: false, api: true }).load();
    var newMask = $('#exposeMask').get();
    $('#mapPane').append(newMask);
	
	$('body').load(initMap());
		
$('#featuredPlayBtn').click(fPlay);
$('#featuredPauseBtn').click(fPause);
$('#featuredPlayBtn').hide();

}); // End of .Ready

function initMapControls() {

    swapRoseOut();

    //~~~~~~~~~~~~~~~~~~~~ SET UP INITIAL MOUSE EVENTS ~~~~~~~~~~~~~~~~~~~~~~~~~

    $('#ski').mouseenter(function () { roseFadeIn() });
    $('#canoe').mouseenter(function () { roseFadeOut() });

    $("#pickLakeType").mouseenter(function () { 	// Set up the Radio Buttons, Stop the swapImage
        if (swapIn) clearTimeout(swapIn);
        if (swapOut) clearTimeout(swapOut);
        $('#rose').stop(true, true);
    });

    $("#pickLakeType").mouseleave(function () {
        $('#rose').stop(true, true);
        swapRoseOut()
    });

    $('#pickLakeType input').one('click', function () {
        lakeTypeSelected = $(this).attr("id");
        $("#pickLakeType").unbind('mouseleave');
        $(window).unbind('resize');
        setTimeout('moveLegend(lakeTypeSelected)', 500);
    });

};

function roseFadeOut(){$('#rose').stop(true,true).fadeOut();};
function roseFadeIn(){$('#rose').stop(true,true).fadeIn();};

var swapIn = null;
var swapOut = null;
function swapRoseOut()
{
    roseFadeOut();
	swapIn = setTimeout('swapRoseIn()',3000);//Control the speed of the crossfade.
};

function swapRoseIn()
{
    roseFadeIn();
	swapOut = setTimeout('swapRoseOut()',3000);//Control the speed of the crossfade.
};



/*
*/



function moveLegend(lakeTypeSelected) // TODO pass in Type
{
    var lakeTypeLoad = lakeTypeSelected;

        $('#pickLakeType').animate({ top: 10,
            left: 10,
            width: 200,
            marginTop: 0,
            marginLeft: 0
        }, 500, function ()
        {
        });
		
        $('#rose').animate({ backgroundPosition: '-100px 0px' }, 500, function () { });
        $('#paul').animate({ backgroundPosition: '-100px 0px' }, 500, function () {});
        $('#lakeType').animate({ width: 200 }, 500, function () {
			 lakeExpose.close();															   
			 setMarkers(lakeTypeLoad);
			  //$('#sideBarWrapper').slideDown();
			  $('#ski').unbind();
			  $('#canoe').unbind();
			  $('#ski').click(function(){setMarkers('ski'); roseFadeIn(); lakeTypeSelected = ($(this).attr("id"))});
			  $('#canoe').click(function(){
				   setMarkers('canoe');
				   roseFadeOut();
				   lakeTypeSelected = ($(this).attr("id"));
				   
/*					if(lakeTypeSelected == 'ski'){   TODO maybe add hover to the buttons later
					  $('#canoe').hover(roseFadeOut(), roseFadeIn());
					};*/
				   });
		}); 
}

//~~~~~~~~~~~~~~~~~~~~SMART RESIZE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/
(function ($, sr)
{

    // debouncing function from John Hann
    // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/

    var debounce = function (func, threshold, execAsap)
    {
        var timeout;

        return function debounced()
        {
            var obj = this, args = arguments;
            function delayed()
            {
                if (!execAsap)
                    func.apply(obj, args);
                timeout = null;
            };

            if (timeout)
                clearTimeout(timeout);
            else if (execAsap)
                func.apply(obj, args);

            timeout = setTimeout(delayed, threshold || 100);
        };
    }
    // smartresize 
    jQuery.fn[sr] = function (fn) { return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

})(jQuery, 'smartresize');

// usage:
$(window).smartresize(function ()
{
    resetTop = $(window).height() / 2 - 200;
    resetWidth = $(window).width() / 2 - 200;
    $("#pickLakeType").css({ top: resetTop, left: resetWidth });
});