addLoadEvent(initScroller);

var currentX = 150;

function DragScrool() {

    var el = null;
    var min = null;
    var max = null;
    var minMouseX = null;
    var maxMouseX = null;
    var lastMouseX = null;
    
    this.init = function(element, minX, maxX)
    {
        el = element;
        el.style.left = currentX + "px";
        min = minX;
        max = maxX;
        el.onmousedown = dragStart;
    }
    
    function dragStart(e)
    {
        e = fixE(e);
        lastMouseX = e.clientX;
        var x = parseInt(el.style.left);
        minMouseX = e.clientX - x + min;
        maxMouseX = minMouseX + max - min;
        document.onmouseup = dragEnd;
        document.onmousemove = dragMove;
        return false;
    }
    
    function dragMove(e)
    {
        e = fixE(e);
        var ex	= e.clientX;
        var x = parseInt(el.style.left);
        var newX;
        ex = Math.max(ex, minMouseX);
        ex = Math.min(ex, maxMouseX);
        newX = x + (ex - lastMouseX);
        el.style["left"] = newX + "px";
        currentX = newX;
        lastMouseX	= ex;
        el.onDrag(newX);
        return false;
    }
    
    function dragEnd()
    {
        document.onmousemove = null;
        document.onmouseup = null;
    }
    
    function fixE(e)
    {
        if (typeof e == 'undefined') e = window.event;
        if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
        return e;
    }

}

var Drag = new DragScrool();

function initScroller() 
{      
    var rollerDrag = document.getElementById("rollerDrag");
    var minX = 0;
    var maxX = 305;
    if (rollerDrag) {
        Drag.init(rollerDrag, minX, maxX);
        
        rollerDrag.onDrag = function () {
            var showCase = document.getElementById("showCase");
            var roller = document.getElementById("roller");
            var rollerLeft = parseInt(rollerDrag.style.left);
            roller.style.left = 0 - (rollerLeft * (roller.offsetWidth - showCase.offsetWidth) / maxX) + "px";
        }   
		rollerDrag.onDrag();
    }
    
    var rollerPrev = document.getElementById('rollerPrev');
    var rollerNext = document.getElementById('rollerNext');
    
    if (rollerPrev && rollerNext) { 
    
        var step = 30;
          
        rollerPrev.onmousedown = function() {
            if (currentX - step >= minX) {
                currentX = currentX - step;
            } else {
                currentX = minX;
            }
            rollerDrag.style["left"] = currentX + "px";
            rollerDrag.onDrag(currentX);
        }
        
        rollerNext.onmousedown = function() {
            if (currentX + step <= maxX) {
                currentX = currentX + step;
            } else {
                currentX = maxX;
            }
            rollerDrag.style["left"] = currentX + "px";
            rollerDrag.onDrag(currentX);
        }
    
    
    }
}