// ###########################################################################################################
// Global
// ###########################################################################################################

// ###########################################################################################################
// DOM is ready, but images and other files have not yet finished loading.
// ###########################################################################################################

$(document).ready(function() {

    //Preload images
    oMoveable.preloadImages(template_directory+"/images/slogan.png", template_directory+"/images/logo.png", template_directory+"/images/twitter.png", template_directory+"/images/twitter-over.png", template_directory+"/images/facebook.png", template_directory+"/images/facebook-over.png", template_directory+"/images/background.png", template_directory+"/images/left-smoke.png", template_directory+"/images/right-smoke.png", template_directory+"/images/ricky-elder.png");

    //Whenever the viewport changes size make sure the moveable items maintain their ratio
    $(window).bind("resize", function(){
        clearTimeout(oMoveable.timer);
        oMoveable.timer = setTimeout(oMoveable.resize, 250);
    });

    //Define the screen size that items were designed to fit as the current viewport size will be a ratio of this and thus allow us to resize out images
    oMoveable.viewportDesigned = [1440, 810];

    //Define moveable items (image id, image source, image alt text, image position[top, right, bottom, left], [image width, image height], z-index, move speed)
    var i = 0;
    oMoveable.images[i++] = new oMoveable.item("bg", template_directory+"/images/background.png", "Background", [0, null, null, 0], [null, null], 1, 0);
    oMoveable.images[i++] = new oMoveable.item("rightSmoke", template_directory+"/images/right-smoke.png", "Right smoke", [0, 0, null, null], [1000, 1080], 2, -0.04);
    oMoveable.images[i++] = new oMoveable.item("rickyelder", template_directory+"/images/ricky-elder.png", "Ricky Elder on his bike", [null, 50, 50, null], [360, 639], 3, 0);
    oMoveable.images[i++] = new oMoveable.item("leftSmoke", template_directory+"/images/left-smoke.png", "Left smoke", [null, null, 0, 0], [1173, 1080], 4, -0.07);

});

// ###########################################################################################################
// Window ready and all images and other files are now loaded.
// ###########################################################################################################

$(window).load(function() {

    //Remember the viewport original size
    oMoveable.viewportOriginal = [$(window).width(), $(window).height()];

    //Set initial background image size it that of the viewport.
    $("img#bg").width(oMoveable.viewportOriginal[0]).height(oMoveable.viewportOriginal[1]);

    //Create moveable items and place them into their initial positions
    oMoveable.create();
    $("#panel").show();

    //Move all moveable items when the cursor moves
    if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){
        var version = new Number(RegExp.$1);
        if (version > 6) {
            $(window).bind("mousemove", function(event){oMoveable.move(event);});
        }
    } else if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
        $(window).bind("mousemove", function(event){oMoveable.move(event);});
    } else if (/Chrome[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
        $(window).bind("mousemove", function(event){oMoveable.move(event);});
    } else if (/Safari[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
        //$(window).bind("mousemove", function(event){oMoveable.move(event);});
    }

});