var AlNassma = new Object();
AlNassma.loaded = new Array();
AlNassma.preload = function(id) {
    // create new Image object
    var img = new Image;
    
    // set up event handlers for the Image object
    img.onload = function() {
        AlNassma.loaded.push(id);
        if(AlNassma.shown==id) {
            AlNassma.spinner.hide();
            $("#" + id).fadeIn("slow");
        }
    }
    
    // assign the .src property of the Image object
    img.src = "img/al-nassma-" + id + ".jpg";
};
AlNassma.show = function(id) {
    var show = function() {
        AlNassma.shown = id;
        for(var i=0; i<AlNassma.loaded.length; i++) {
            if(AlNassma.loaded[i]==id) {
                $("#" + id).fadeIn("slow");
                return;
            }
        }
        AlNassma.spinner.show();
    };
    if(AlNassma.shown)
        $("#" + AlNassma.shown).fadeOut("slow", show);
    else
        show();
};

(function() {
    $(document).ready(function () {
        
        $(".switch").click(function() {
            AlNassma.show($(this).attr("href").substring(1));
        })
        
        AlNassma.spinner = $("#spinner");
        
        var defaultSite = $(".site").get(0).id;
        $(".site").each(function() {
            $(this).hide();
            AlNassma.preload(this.id);
            if($(this).hasClass("default"))
                defaultSite = this.id;
        });
        
        if(window.location.hash) 
            AlNassma.show(window.location.hash.substring(1));
        else 
            AlNassma.show(defaultSite);
        
    });
})();