var current = false;
var cached = {};
var viewport = {};
viewport.Width = 952;
viewport.Height = 514;

$(document).ready(function(){
    window.scrollTo(0, $("body").attr("scrollHeight"));
    var imgs = $("img.full");
    if(imgs.length > 0){
        current = imgs[0].id;
        cached[imgs[0].id] = "cached";
    }
    $("div.box").css("opacity", 0.50);
    $("div.outerbox").css("opacity", 0.25);
    $("div.innerbox").css("opacity", 0.15);
    var a = current.split("_");
    var id = a[0] + "_" + a[1];
    if(a[0] == "page") {
        switchContent(pages[id].content, pages[id].position);
    }
    else if(a[0] == "destination")
    {
        var p = destinations[id];
        var ul = ['<ul id="thumbnails">'];
        for(var i = 0; i < p.images.length; i++){
            ul.push('<li><a class="thumb" href="' + p.images[i].src + '" title="' + p.images[i].title + 
            '"><img src="' + p.images[i].thumb + '" alt="' + p.images[i].title + '"' + ((i == p.images.length - 1)?' class="last"':'') + ' /></a></li>');
        }
        ul.push('</ul>');
        switchContent(p.content + ul.join(''), p.position, p.images);
    }

    $("#nav a.main").mouseenter(function(evt){
        $("#nav a.main").removeClass("hover");
        $(this).addClass("hover");
        $(this).parent().siblings().children("ul").slideUp();
        $(this).next().slideDown();  
    });
    $("#nav a.sub, #nav a.dest").mouseenter(function(evt){
        $(this).addClass("hover");
    }).mouseleave(function(evt){
        $(this).removeClass("hover");
    });
    $("#nav").mouseleave(function(evt){
        $(this).find("a.main").removeClass("hover");
        $(this).find("ul > li > ul").slideUp();
    });
    
    $("#nav a.main").click(function(evt){
        $("#nav a").removeClass("selected");
        $(this).addClass("selected");
        var p = pages[this.id];
        switchContent(p.content, p.position);
        switchImage(p.images[0]);
        return false;
    });
    
    $("#nav a.sub").click(function(evt){
        $("#nav a").removeClass("selected");
        $(this).addClass("selected");
        $(this).parent().parent().prev().addClass("selected");
        
        var p = pages[this.id];
        switchContent(p.content, p.position);
        switchImage(p.images[0]);
        return false;
    });
    
    $("#nav a.dest").click(function(evt){
        $("#nav a").removeClass("selected");
        $(this).addClass("selected");
        $(this).parent().parent().prev().addClass("selected");
        
        var p = destinations[this.id];
        var ul = ['<ul id="thumbnails">'];
        for(var i = 0; i < p.images.length; i++){
            ul.push('<li><a class="thumb" href="' + p.images[i].src + '" title="' + p.images[i].title + 
            '"><img src="' + p.images[i].thumb + '" alt="' + p.images[i].title + '"' + ((i == p.images.length - 1)?' class="last"':'') + ' /></a></li>');
        }
        ul.push('</ul>');
        switchContent(p.content + ul.join(''), p.position, p.images);
        switchImage(p.images[0]);
        return false;
    });
   $.each(pages, function(s, o){
        for(var i = 0; i < o.images.length; i++){
            preloadImages(o.images[i]);
        }
    });
    $.each(destinations, function(s, o){
        for(var k = 0; k < o.images.length; k++){
            preloadImages(o.images[k]);
        }
    });
});
function switchImage(img) {
    if( img && img.src ) {
        var s = cached[img.id];
        if(s){
            if(s == "cached"){
                $("#" + img.id).siblings("img").fadeOut("slow");
                $("#" + img.id).fadeIn("slow");
            }
            else if(s == "caching"){
                $("#" + img.id).bind("load", function(e) {
                    if(current == img.id) {
                        $(this).siblings("img").fadeOut("slow");
                        $(this).fadeIn("slow");
                    }
                });
            }
        }
        else if(preloadImages(img))
        {
            $("#" + img.id).bind("load", function(e) {
                if(current == img.id) {
                    $(this).siblings("img").fadeOut("slow");
                    $(this).fadeIn("slow");
                }
            });
        }
        current = img.id;
    }
}
function preloadImages(img) {
    if(img && img.id && img.src) {
        preloadImage(img.id, img.src, img.title, "full");
    }
    if(img && img.id && img.thumb) {
        preloadImage(img.id + "_thumb", img.thumb, img.title);
    }
    return true;
}
function preloadImage(id, src, title, classname) {
    var s = cached[id];
    if(!s && $("#" + id).length == 0){
        cached[id] = "caching";
        var i = new Image();
        i.src = src;
        i.alt = title;
        i.id = id;
        if(classname){
            i.className = classname;
        }
        i.style.display = "none";
        $("#content").append(i);
        $("#" + id).bind("load", function(e) {
            cached[id] = "cached";
        });
    }
}
function getHeightFromHTML(html) {
    var div = document.createElement("div");
    div.className = "boxcontent";
    div.style.display = "none";
    $("#content").append(div);
    $(div).html(html);
    var h = $(div).height();
    $(div).remove();
    return h;
}
function getWidthFromHTML(html) {
    var div = document.createElement("div");
    div.style.display = "none";
    $(div).html(html);
    $("#content").append(div);
    var w = $(div).width();
    $(div).remove();
    return w;
}
function getDimensionsAndPositions(html, pos) {
    var pd = {};
    pd.Height = getHeightFromHTML(html);
    pd.Width = getWidthFromHTML(html);
    pd.OuterWidth = pd.Width + 6;
    if(pd.Width >= 452) {
        pd.Width = 452;
        pd.OuterWidth = pd.Width + 48;
    }
    pd.OuterHeight = pd.Height + 44;
    switch(pos.substr(0,1)) {
        case 'b':
            pd.Top = viewport.Height - pd.OuterHeight - 48;
            break;
        case 't':
            pd.Top = 24;
            break;
        case 'c':
            pd.Top = (viewport.Height - pd.OuterHeight) / 2;
            break;
    }   
    switch(pos.substr(1,1)) {
        case 'l':
            pd.Left = 24;
            break;
        case 'c':
            pd.Left = (viewport.Width - pd.OuterWidth) / 2;
            break;
        case 'r':
            pd.Left = viewport.Width - pd.OuterWidth - 48;
            break;
    }
    return pd;
}
function switchContent(html, pos, images) {
    var pd = getDimensionsAndPositions(html, pos);
    $("div.box").animate({left: pd.Left, top: pd.Top, height: pd.OuterHeight, width: pd.OuterWidth});
    $("div.outerbox").animate({left: pd.Left + 12, top: pd.Top + 12, height: pd.OuterHeight, width: pd.OuterWidth});
    $("div.innerbox").animate({left: pd.Left + 24, top: pd.Top + 24, height: pd.OuterHeight, width: pd.OuterWidth});
    if(!images){
        $("div.boxcontent").animate({left: pd.Left + 36, top: pd.Top + 36, opacity:0, height: pd.Height, width: pd.Width}, function(){
            $(this).html(html).animate({opacity: 1});
        });
    }
    else {
        $("div.boxcontent").animate({left: pd.Left + 36, top: pd.Top + 36, opacity:0, height: pd.Height, width: pd.Width}, function(){
            $(this).html(html).animate({opacity: 1});
            $("a.thumb").each(function(ix,el){
                $(this).click(function(){
                    switchImage(images[ix]);
                    return false;
                });
                $(this).mouseenter(function(){
                    $(this).parent().siblings().find("img").animate({opacity:0.5}, "fast");
                    $(this).find("img").animate({opacity:1}, "fast");
                });
            });
            $("#thumbnails").mouseleave(function(){
                $(this).find("img").animate({opacity:1}, "fast");
            });
        });
    }
}
function debugWrite(s) {
    if($("#debug").length == 0) {
        var div = document.createElement("div");
        div.id = "debug";
        $(body).append(div);
    }
    $("#debug").html($("#debug").html() + "<br />" + s).show();
}