$(document).ready(function() {
    $("div.text").css("overflow", "hidden");
    $("div.gallery").css("overflow", "hidden");
})

$(window).load(function() {
    // Vertikal
    var textNode = $("div.text");
    var contentNode = $("div.content");
    var fullHeight;
    var height = textNode.height();
    var ANIMATE = 250;

    if (textNode.hasClass("noscroll")) {
        fullHeight = 0;
        textNode.css("height", "auto");
    } else {
        textNode.css("height", "auto");
        fullHeight = textNode.outerHeight(true);
        textNode.removeAttr("style");
    }

    if (fullHeight > height) {
        var slider = $("<div class='slider-vertical' />").insertBefore(textNode);
        var scrollpane = $("<div class='scrollpane' />");

        fullHeight += 20; // security
        textNode.css("overflow", "hidden");
        scrollpane.css("overflow", "hidden");
        textNode.wrap(scrollpane);
        slider.slider({
            min: -100,
            max: 0,
            animate: ANIMATE,
            orientation: "vertical",
            slide: function(e, ui) {
                var distance = Math.round( (ui.value / 100 * ( height - fullHeight )) * -1 ) + 'px'
                if (e.originalEvent.type == 'mousemove' || e.originalEvent.type == 'keydown') {
                    textNode.css("margin-top", distance);
                } else {
                    textNode.animate({
                        'margin-top': distance
                    }, ANIMATE);
                }
            },
            change: function(e, ui) {
                var distance = Math.round( (ui.value / 100 * ( height - fullHeight )) * -1 ) + 'px'
                textNode.css("margin-top", distance);
            }
        });
        textNode.css("height", fullHeight + "px");

        contentNode.bind("mousewheel", function(e, delta) {
            var scroll_delta = delta * 4;
            var value = slider.slider('option', 'value');

            value += scroll_delta;
            if (value > 0) value = 0;
            else if (value < -100) value = -100;

            slider.slider('option', 'value', value);
            e.preventDefault();
        })
    }

    // Horizontal
    var imgContainer = $("div.gallery");
    var ANIMATE_H = 300;

    if (imgContainer.find("img").length > 1) {
        var width = 0;
        var containerWidth = imgContainer.outerWidth(true);
        var slider = $("<div class='slider-horizontal' />").insertAfter(imgContainer);
        var scrollpane = $("<div class='scrollpane' />");
        
        scrollpane.css("overflow", "hidden").css("height", "auto");
        imgContainer.wrap(scrollpane);
        imgContainer.css("overflow", "hidden");

        imgContainer.find("img").each(function(){
           width += $(this).outerWidth(true);
        })
        width += 25; // security distance
        slider.slider({
            animate: ANIMATE_H,
            slide: function(e, ui) {
                var distance = Math.round( ui.value / 100 * ( containerWidth - width ) ) + 'px'
                if (e.originalEvent.type == 'mousemove' || e.originalEvent.type == 'keydown') {
                    imgContainer.css("margin-left", distance);
                } else {
                    imgContainer.animate({
                        'margin-left': distance
                    }, ANIMATE_H);
                }
            }
        });
    }
})