// our javascript file, included from the document head

// for production, change log to the below so it does nothing on safari
//log = console.log;
log = function(){};

// init is called on body load to prevent menu detachment
function init(){
    log("init()");

    // MENUS:
    // detach the menus from their proper parents and attach to the outer 
    // container for consistent positioning 
    $('li.browse_by').each( prepare_menu );
    // bind select the collection li, and attach a hover listener to it
    $('ul#browse_by_menu > li').hover(cb_show_menu, cb_hide_menu);
    $('ul.dropdown_menu').hover(cb_show_menu, cb_hide_menu);
    
    // catch the click event so that only people without javascript enabled get the menu redirect
    $('ul#browse_by_menu > li.browse_by > a').bind('click', function(){return false;});

    // SLIDESHOW:
    // if this is the homepage, fire the slideshow script
    $('#home_page').each( request_image );

    // BROWSING POPUPS
    // image pop-up, on-clicks for the thumbnails of the scene pages
    $('div#thumbnail_left').css('cursor', 'pointer').bind('click', function(event){
        $('#left_pop_up_container').removeClass('closed').css('cursor', 'pointer');}
        );
    $('#left_pop_up_container').bind('click', function(event){
        $('#left_pop_up_container').addClass('closed');}
        );
    $('div#thumbnail_right').css('cursor', 'pointer').bind('click', function(event){
        $('#right_pop_up_container').removeClass('closed').css('cursor', 'pointer');}
        );
    $('#right_pop_up_container').bind('click', function(event){
        $('#right_pop_up_container').addClass('closed');}
        );
}

// save the position of the dropdown menu, then detach it and reattaching
// it to page inner, then positioning it back again, for cross browser compatibility
function prepare_menu(){
    // save original position based on original parent li
    var position = $(this).offset(); 
    var height = $(this).height();
    
    // detach from parent and reattach to outer page container
    // this is to make sure z-index will put it always in foreground
    $('#page').after( $('ul.dropdown_menu').remove() );

    // set the position of the dropdown_menu
    var menu_ul = "ul#" + $(this).attr('child');
    $(menu_ul).css("top", position.top+height ).css("left", position.left-1 );
}

// callbacks that register timer callbacks
function cb_hide_menu(evt){
    log("cb_hide_menu(), this: " + this );
    // figure out who is to be hidden
    if( $(this).hasClass('browse_by')){
        var jq_menu = $("ul#" + $(this).attr('child') );
    }else{
        var jq_menu = this;
    }
    var timeout_id = $(jq_menu).attr('id');
    log( " - timeout_id: ", timeout_id ); 
    // set a global timeout to hide it
    window.menu_timeouts = new Object(); 
    window.menu_timeouts[ $(jq_menu).attr('id') ] = setTimeout( function(){ 
        $(jq_menu).hide(); 
    }, 300 );
}

function cb_show_menu(evt){
    log("cb_show_menu() this: ", this );
    // figure out which menu we're showing
    if( $(this).hasClass('browse_by') ){
        var jq_menu= "ul#" + $(this).attr('child');
    }
    else{
        var jq_menu = this;
    }
    // save the id to use as timeout key
    var timeout_id = $(jq_menu).attr('id');
    log( " - timeout_id: ", timeout_id ); 
    // clear the timeout for this menu if one is running
    try {
        clearTimeout( window.menu_timeouts[ timeout_id ]);
        log("  - cleared timeout for ", timeout_id );
    } catch(e){;}
    // hide all the sibling menus ( NB, they be severed yo! )
    $('ul.dropdown_menu').each( function(){
        if( $(this).attr('id') != timeout_id ) $(this).hide(); 
    });
    // it's safe to show the menu!
    $( jq_menu ).show();
}


// request_image makes an ajax hit and starts off the slideshow loop
function request_image(){
    log("request image()");
    // get the src for the current showing image
    var last_file = $('#main_image').attr('src');
    // clear the image buffer loaded flag
    window.swap_image_loaded = false;
    // request the next image filename
    var random = Math.random();
    $.get('/get_home_image/?random='+random, {last_file: last_file}, function(response){
        // load the new image into the image buffer, and set loaded flag onload
        $("#main_image_buffer").attr('src',response).bind('load', function(){ 
            window.swap_image_loaded = true;
        });
    });
    // schedule the actual image swapping for 2 seconds from now
    window.swap_image_timeout = setTimeout(swap_image, 2000);
}

// image swap, checks if image loaded ok first and waits if need be
function swap_image(){
    if( window.swap_image_loaded ){
        // schedule next call to request_image before anything
        setTimeout( request_image, 3000 );
        // get the src string from the buffer
        var new_src = $('#main_image_buffer').attr('src');
        log("swaping main image, new src: ", new_src );
        setTimeout( function(){ $('#main_image').attr('src', new_src) }, 1500 );
        $('#main_image').fadeOut(1500).fadeIn(1500);
    }else{
        // if image not loaded yet, try again in a bit
        setTimeout(swap_image, 100 );
    }
}