window.onload = function()
{
    
    var canvasMask = new Dragdealer('canvas-mask', { vertical: true, steps: 2, loose: true });
    
    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;
    }

   /* Slideshow  for Products*/
    // Slideshow products
    
    var menuWrapper = document.getElementById('slideshow-menu-wrapper-products');
    var cursor = document.getElementById('slideshow-menu-cursor-products');
    
    slideshow = new Dragdealer('slideshow-products',
    {
        steps: 4,
        loose: true,
        animationCallback: function(x, y)
        {
            var top = x * (menuWrapper.offsetHeight - cursor.offsetHeight);
            cursor.style.top = String(top) + 'px';
        }
    });
    
    document.getElementById('products-photo-1').onclick = function()
    {
        slideshow.setStep(1);
        return false;
    }
    document.getElementById('products-photo-2').onclick = function()
    {
        slideshow.setStep(2);
        return false;
    }
    document.getElementById('products-photo-3').onclick = function()
    {
        slideshow.setStep(3);
        return false;
    }
   /* Slideshow  for Services*/
    // Slideshow Services
    
    menuWrapper2 = document.getElementById('slideshow-menu-wrapper-services');
    cursor2 = document.getElementById('slideshow-menu-cursor-services');
    
    var slideshow2 = new Dragdealer('slideshow-services',
    {
        steps: 4,
        loose: true,
        animationCallback: function(x, y)
        {
            var top = x * (menuWrapper2.offsetHeight - cursor2.offsetHeight);
            cursor2.style.top = String(top) + 'px';
        }
    });
    
    document.getElementById('services-photo-1').onclick = function()
    {
        slideshow2.setStep(1);
        return false;
    }
    document.getElementById('services-photo-2').onclick = function()
    {
        slideshow2.setStep(2);
        return false;
    }
    document.getElementById('services-photo-3').onclick = function()
    {
        slideshow2.setStep(3);
        return false;
    }
}