window.onload = function()
{
    // Simple slider
    
    new Dragdealer('simple-slider');
    
    // Vertical
    
    var mask = document.getElementById('scroll-mask');
    var content = document.getElementById('scroll-content');
	var scrollbar = document.getElementById('scroll-bar');
    
    new Dragdealer('scroll-bar',
    {
        horizontal: true,
        vertical: false,
        yPrecision: content.offsetHeight,
        steps: 2,
        loose: true,
        speed: 30,
        animationCallback: function(x, y)
        {
            var margin = x * (content.offsetHeight - mask.offsetHeight);
            content.style.marginTop = (String(+margin)-(content.offsetHeight/2)) + 'px';
			var bg_margin = x * ((scrollbar.offsetWidth * 2) - scrollbar.offsetWidth);
			scrollbar.style.backgroundPosition = String(+(bg_margin-(scrollbar.offsetWidth * 2))) + 'px';
			/*content.style.opacity = 1-(x*1.5);*/
        }
    });
    
    // Magnifier
    
    var text = document.getElementById('magnifying-text');
    
    new Dragdealer('magnifier',
    {
        steps: 6,
        snap: true,
        animationCallback: function(x, y)
        {
            text.style.fontSize = String(12 + x * 24) + 'px';
        }
    });
    
    // Slideshow
    
    var menuWrapper = document.getElementById('slideshow-menu-wrapper');
    var cursor = document.getElementById('slideshow-menu-cursor');
    
    var slideshow = new Dragdealer('slideshow',
    {
        steps: 4,
        loose: true,
        speed: 40,
        animationCallback: function(x, y)
        {
            var top = x * (menuWrapper.offsetHeight - cursor.offsetHeight);
            cursor.style.top = String(top) + 'px';
        }
    });
    
    document.getElementById('slideshow-photo-1').onclick = function()
    {
        slideshow.setStep(1);
        return false;
    }
    document.getElementById('slideshow-photo-2').onclick = function()
    {
        slideshow.setStep(2);
        return false;
    }
    document.getElementById('slideshow-photo-3').onclick = function()
    {
        slideshow.setStep(3);
        return false;
    }
    document.getElementById('slideshow-photo-4').onclick = function()
    {
        slideshow.setStep(4);
        return false;
    }
    
    // Map
    
    var canvasMask = new Dragdealer('canvas-mask', { vertical: true, steps: 2, loose: true, speed: 40 });
    
    document.getElementById('canvas-slide-1').onclick = function()
    {
        canvasMask.setValue(0, 0);
        return false;
    }
    document.getElementById('canvas-slide-2').onclick = function()
    {
        canvasMask.setValue(1, 0);
        return false;
    }
    document.getElementById('canvas-slide-3').onclick = function()
    {
        canvasMask.setValue(0, 1);
        return false;
    }
    document.getElementById('canvas-slide-4').onclick = function()
    {
        canvasMask.setValue(1, 1);
        return false;
    }
}