var baseOpacity = 0.25;
var isScrolling = false;
var aWidth = 0; // area width
var cid = -1;
var lastScroll = -1;

function InitPosition() {
    var cWidth = 0; // content holder width
    var wWidth = $(window).width(); // window width
    var padding = 0; // padding on content sides
    var height = $(window).height() - $("#header").outerHeight({margin:true});

    $("#wrapper").height(height);

    $("#content .area").each(function(arr) {
        cWidth += $(this).outerWidth({margin:true});
        $(this).css("opacity", baseOpacity);
        $(this).height(height-100);
        
        //alert($(this).height());
       
        aWidth = (arr == 1 ? $(this).outerWidth({margin:true}) : aWidth);
        //alert(aWidth);
        
        $(this).bind("click", function() { SlideToArea(arr); });
    });

    padding = Math.round((wWidth - aWidth) / 2);
    $("#content .area:first").css("margin-left", padding);
    $("#content .area:last").css("margin-right", padding);

    cWidth += padding*2;

    $("#content").width(cWidth);
}

/***** SLIDE FUNCTION *****/
function SlideToArea(idx) {

    if (!isScrolling && Math.abs(lastScroll-(new Date())) > 800) {
    
        isScrolling = true;
        
        document.location.href = document.location.toString().split("#")[0] + "#" + idx;
        
        $("#content .area.active").css("opacity", baseOpacity);
        $("#content .area.active").removeClass("active");
        
        $("#content .area").eq(idx).addClass("active");
        $("#content .area").eq(idx).css("opacity", 1);
        $("#content .area").eq(idx).css("opacity", "none");
        
        $("#wrapper").scrollTo(
            (aWidth*idx)+"px",
            1100,
            {
                margin: true,
                axis:'x',
                easing: 'easeOutCirc',
                onAfter: function() {
               
                    isScrolling = false;
                    cid = idx;
                    lastScroll = new Date();
                }
            }
        );   
    }
}
/***** / SLIDE FUNCTION *****/

$(document).ready(function() {
/***** $(document).ready *****/

/***** CONTENT *****/

$(window).bind("resize", function() { InitPosition(); SlideToArea(cid); });

InitPosition();

$("#wrapper").bind("scroll", function(evt) {

    var content = Math.round($("#wrapper").scrollLeft()/$("#content .area").width()-.2);
    
    if (content != cid)
        SlideToArea(content);
        
});

$("#wrapper").css("visibility", "visible");

var startContent = document.location.toString().split("#")[1];

if (startContent != "" && parseInt(startContent) < $("#content .area").size())
    SlideToArea(parseInt(startContent));
else
    SlideToArea(0);

/***** / CONTENT *****/

/***** NAVIGATION BUILDER *****/

$("a.scrolllink").bind("click", function() {
    var file = document.location.toString().split("#")[0];
    var newFile = $(this).attr("href").split("#")[0];
    
    if (file.substring(file.lastIndexOf("/")+1) == newFile.substring(newFile.lastIndexOf("/")+1) ||
        newFile == "") {
        
        SlideToArea(parseInt($(this).attr("href").split("#")[1]));
        
    }
});

/***** / NAVIGATION BUILDER *****/

/***** GALLERY *****/

$(".gallery").each(function() { 

    if ($(this).css("overflow") == "scroll") {
        $(this).prepend("<div class='images scroll'></div>");
        $(this).css("overflow", "visible");
    } else {
        $(this).prepend("<div class='images'></div>");
    }
    
    //$(this).prepend("<div class='largeimages'></div>");
    
    var sImgs = $(this).children(".images");
    //var lImgs = $(this).children(".largeimages");
    
    $(this).children("img").each(function(arr) {
    
        var sImg = $(this);
        var lImg;
        var img = sImg.attr("src");
        var title = sImg.attr("title");
        var lImgWidth = sImg.width();
        var lImgHeight = sImg.height();
        
        sImg = sImg.wrap("<div class='image'></div>").parent();
        if (sImg.children("img").attr("alt") != "")
            sImg.css("background-position", sImg.children("img").attr("alt"));
        else
            sImg.css("background-position", "center center");
        sImg.children("img").remove();
        sImg.css("background-image", "url("+img+")");
        sImg.append("<a href='#'></a>");
        
        sImg.appendTo(sImgs);
        
        $(sImg).children("a").bind("click", function() {
            var mysImg = $(this).parent();
            var mylImg = $(mysImg).clone();
            if (title != "")
                $(mylImg).prepend("<div>" + title + "</div>");
            
            $(mylImg).css("background-position", "center center");
            $(mylImg).removeClass("image");
            $(mylImg).addClass("largeimage");
            $(mylImg).prependTo($("body"));
            
            $(mysImg).addClass("active");
            $(mysImg).css("opacity", 1);
            $(mysImg).siblings().css("opacity", 0.5);
            
            $(mylImg).addClass("active");
            $(mylImg).css("opacity", 0);
            $(mylImg).width($(mysImg).width());
            $(mylImg).height($(mysImg).height());
            
            mylImg.css("left", sImg.offset().left);
            mylImg.css("top", sImg.offset().top);
            
            $(".largeimage.active").children("a").trigger("click");
            
            $(mylImg).animate({
                opacity: 1,
                width: lImgWidth,
                height: lImgHeight,
                left: ($(window).width() / 2) - (lImgWidth/2) - 4,
                top: ($(window).height() / 2) - (lImgHeight/2) - 4
            }, 1100, function() {
                $(mylImg).children("div").css("top", -$(mylImg).children("div").outerHeight());
                $(mylImg).children("div").css("visibility", "visible");
            });
            
            $(mylImg).children("a").bind("click", function() {
                var mylImg = $(this).parent();
                
                if ($(mysImg).siblings(".active").size() == 0)
                    $(mysImg).siblings().css("opacity", 1);
                
                $(mylImg).animate({
                    opacity: 0
                }, 1100, function() {
                    
                    $(mysImg).removeClass("active");
                    $(this).remove();
                    
                });
                
                return false;
            });
            
            return false;
        });
    
    });
    
    $(this).children(".images").append("<div class='spacer'></div>");

});

/***** / GALLERY *****/

/***** SCROLL DIVS *****/

$(".scroll").each(function(arr) {
    var preHeight = $(this).height();
    var fullHeight = 0;
    var scrHeight = 0;
    
    $(this).css({overflow: "visible", height: "auto"});
    
    fullHeight = $(this).height();
   
    $(this).css({overflow: "hidden", height: preHeight});
    
    scrHeight = $(this).height();
    
    //alert($(this).html());
    //alert(preHeight + " | " + fullHeight + " > " + scrHeight + " | " + $(window).height() * .86);
    
    if (fullHeight > scrHeight) {
    
        $(this).parent().prepend("<div class='scrollbar'><div class='up'></div><div class='down'></div></div>");
        var scrollbar = $(this).parent().children(".scrollbar").eq(0);
        $(scrollbar).height($(this).height());
        $(scrollbar).css("top", $(this).offset().top - $(this).parent().offset().top);
        
        $(scrollbar).children().hover(function() {
            $(this).addClass("hover");
        }, function() {
            $(this).removeClass("hover");
        });
        
        $(scrollbar).children(".down").bind("click", function() {
            $(scrollbar).siblings(".scroll").animate({
                scrollTop: "+=" + $(scrollbar).height(),
                easing: 'easeOutCirc'
            }, 1100);
        });
        
        $(scrollbar).children(".up").bind("click", function() {
            $(scrollbar).siblings(".scroll").animate({
                scrollTop: "-=" + $(scrollbar).height(),
                easing: 'easeOutCirc'
            }, 1100);
        });
        
    }
});

/***** / SCROLL DIVS *****/

$(".hideondone").hide();

/***** / $(document).ready *****/
});