function getNextSibling(startBrother)
{
endBrother=startBrother.nextSibling;
while(endBrother.nodeType!=1)
{
endBrother = endBrother.nextSibling;
}
return endBrother;
} 

function getFirstChild(elm)
{
if ( !elm.childNodes.length )
{
return;
}
var children = elm.childNodes.length;
for ( var i = 0; i <= children; ++i )
{
if ( elm.childNodes[i].nodeType == 1 )
{
return elm.childNodes[i];
}
}
return;
}

var firstTime = true;
        function handle(delta, varName) 
         {
       
            //alert(varName+":" + delta);
            //alert(varName+".scrollWheel("+delta+")");
		     setTimeout(varName+".scrollWheel("+delta+")", 0);
         }

        function wheel(event){
           
             
                    var delta = 0;
                    if (!event) 
                            event = window.event;
                     
                     if (event.target) targ = event.target;
	                    else if (event.srcElement) targ = event.srcElement;
	            
	                while (targ != document.body && targ.variableName == null)
	                {
	                    //alert(targ);
	                    targ = targ.parentNode;
	                    if (targ == null){break;}
	                }
	                if (targ == null || targ.variableName == null)
	                {
	                    event.returnValue = true;
	                    return;
	                }
                    
                 
                    
                    if (event.wheelDelta) {
                            delta = event.wheelDelta/120;
                            if (window.opera)
                                    delta = -delta;
                    } else if (event.detail) {
                            delta = -event.detail/3;
                    }
                    if (delta)
                            handle(delta, targ.variableName);
                    if (event.preventDefault)
                            event.preventDefault();
	            event.returnValue = false;
        }
function scrollablePanel(panelID, upBtnId, downBtnId, itemSize, variableName, top1, top2, top3, down1, down2, down3)
{
        this.scrollStep = 0;
        this.stopScroll = false;
        this.acseleration = 1;
        this.totalStep = 0;
        this.acselerationStep = 4;
        this.beginscrollStep = 30;
        this.relPath = "Images/";
        this.itemHeight = itemSize;
        this.panelID = panelID;
        this.upBtnId = upBtnId;
        this.downBtnId = downBtnId;
        this.variableName = variableName;
        this.top1 = top3;
        this.top2 = top1;
        this.top3 =  top2;
        this.down1 = down3;
        this.down2 = down1;
        this.down3 = down2;
        this.finishScrollEnded = true;
        if (window.addEventListener)
            window.addEventListener('DOMMouseScroll', wheel, false);
        window.onmousewheel = document.onmousewheel = wheel;

        document.getElementById(panelID).variableName=variableName;
        
        
        this.scrollWheel = function(step)
        {   
            if (!this.finishScrollEnded){return;}
            document.getElementById(this.panelID).scrollTop -=(step*this.itemHeight);
            this.scrollChanged();
        }
        
       
        this.scrollUp = function()
        {
            
                if(!document.getElementById(this.downBtnId).enabled){return;}
                
                document.getElementById(this.downBtnId).src=this.relPath+this.down1;
                this.stopScroll = false;
                this.scrollStep = this.beginscrollStep;
                this.totalStep = 0;
                setTimeout(this.variableName+".beginScrollUp()", 100);
        }
        this.beginScrollUp = function()
        {
         var div = document.getElementById(this.panelID);
            if (this.stopScroll)
            {
                var begin = div.scrollTop;
                var current = (parseInt(div.scrollTop / this.itemHeight)+1) * this.itemHeight;
                if (0>current){current = 0;}
                this.finishScrollEnded = false;
                var fn = this.variableName+".finishScroll("+(current - begin).toString() + ",1)";
                setTimeout(fn, 0);
                return;
            }
           
            
            div.scrollTop += 5;
            this.scrollChanged();
            this.totalStep ++;
            if (this.totalStep == this.acselerationStep)
            {
                this.scrollStep -=this.acseleration;
                this.totalStep = 0;
            }
            
            if (0>this.scrollStep){this.scrollStep = 0;}
            setTimeout(this.variableName+".beginScrollUp()", this.scrollStep);
        }
        this.stopScrollUp = function()
        {
            this.stopScroll = true;
        }
        
        this.scrollDown = function()
        {
                if(!document.getElementById(this.upBtnId).enabled){return;}
                document.getElementById(this.upBtnId).src=this.relPath+this.top1;
                this.stopScroll = false;
                this.scrollStep = this.beginscrollStep;
                this.totalStep = 0;
                setTimeout(this.variableName+".beginScrollDown()", 100);
        }
        this.beginScrollDown = function()
        {
            var div = document.getElementById(this.panelID);
            if (this.stopScroll)
            {
                var begin = div.scrollTop;
                var current = (parseInt(div.scrollTop / this.itemHeight)) * this.itemHeight;
                if (0>current){current = 0;}
                this.finishScrollEnded = false;
                var fn = this.variableName+".finishScroll("+(begin - current).toString() + ",-1)";
                setTimeout(fn, 0);
                return;
            }
            
            div.scrollTop -= 5;
            this.scrollChanged();
            this.totalStep ++;
            if (this.totalStep == this.acselerationStep)
            {
                this.scrollStep -=this.acseleration;
                this.totalStep = 0;
            }
            
            if (0>this.scrollStep){this.scrollStep = 0;}
            setTimeout(this.variableName+".beginScrollDown()", this.scrollStep);
        }
        
        this.finishScroll = function(count, direction)
        {
            if (!this.stopScroll){return;}
            if (count == 0)
            {
                this.finishScrollEnded = true;
                return;
            }
            var div = document.getElementById(this.panelID);
            div.scrollTop = div.scrollTop + direction;
            this.scrollChanged();
            var fn = this.variableName+".finishScroll("+(count-1).toString() + "," + direction+")";
            setTimeout(fn, 5);
        }
        
        this.stopScrollDown = function()
        {
            this.stopScroll = true;
            
        }
       
        var downOvered = false;
        var upOvered = false;
        this.scrollChanged = function()
        {
        
             var div = document.getElementById(this.panelID);
             var div1 = getFirstChild(div);
             
             if (div.scrollTop + div.offsetHeight >= div1.offsetHeight)
             {
                document.getElementById(this.downBtnId).src=this.relPath+this.down2;
                document.getElementById(this.downBtnId).enabled=false;
             }
             else
             {
                if(downOvered)
                {
                    document.getElementById(this.downBtnId).src=this.relPath+this.down1;
                }
                else
                {
                    document.getElementById(this.downBtnId).src=this.relPath+this.down3;
                }
                document.getElementById(this.downBtnId).enabled=true;
             }
             if (div.scrollTop == 0)
             {
                document.getElementById(this.upBtnId).src=this.relPath+ this.top2;
                document.getElementById(this.upBtnId).enabled=false;
             }
             else
             {
                if(upOvered)
                {
                    document.getElementById(this.upBtnId).src=this.relPath+ this.top1;
                }
                else
                {
                    document.getElementById(this.upBtnId).src=this.relPath+this.top3;
                }
                document.getElementById(this.upBtnId).enabled=true;
             }
        }
        
        this.downOver = function()
        {
            downOvered = true;
             if(!document.getElementById(this.downBtnId).enabled)
             {
                return;
             }
             document.getElementById(this.downBtnId).src=this.relPath+this.down1;
        }
        this.downOut = function()
        {
         downOvered = false;
         this.stopScrollDown();
            if(!this.stopScroll){return;}
             if(document.getElementById(this.downBtnId).enabled)
             {
                document.getElementById(this.downBtnId).src=this.relPath+this.down3;
                return;
             }
             document.getElementById(this.downBtnId).src=this.relPath+this.down2;
        }
        
        this.upOver = function()
        {
            upOvered = true;
             if(!document.getElementById(this.upBtnId).enabled)
             {
                return;
             }
             document.getElementById(this.upBtnId).src=this.relPath+this.top1;
        }
        this.upOut = function()
        {
         upOvered = false;
         this.stopScrollUp();
            if(!this.stopScroll){return;}
             if(document.getElementById(this.upBtnId).enabled)
             {
                document.getElementById(this.upBtnId).src=this.relPath+this.top3;
                return;
             }
             document.getElementById(this.upBtnId).src=this.relPath+this.top2;
        }
}

function scrollablePanelHorizontal(panelID, upBtnId, downBtnId, itemSize, variableName, top1, top2, top3, down1, down2, down3)
{
        this.scrollStep = 0;
        this.stopScroll = false;
        this.acseleration = 1;
        this.totalStep = 0;
        this.acselerationStep = 4;
        this.beginscrollStep = 30;
        this.relPath = "Images/";
        this.itemHeight = itemSize;
        this.panelID = panelID;
        this.upBtnId = upBtnId;
        this.downBtnId = downBtnId;
        this.variableName = variableName;
        this.top1 = top3;
        this.top2 = top1;
        this.top3 =  top2;
        this.down1 = down3;
        this.down2 = down1;
        this.down3 = down2;
         this.finishScrollEnded = true;
         if (window.addEventListener)
            window.addEventListener('DOMMouseScroll', wheel, false);
        window.onmousewheel = document.onmousewheel = wheel;

        document.getElementById(panelID).variableName=variableName;
          this.scrollWheel = function(step)
        {   
        if (!this.finishScrollEnded){return;}
            document.getElementById(this.panelID).scrollLeft -=(step*this.itemHeight);
            this.scrollChanged();
        }
        this.scrollUp = function()
        {
            
                if(!document.getElementById(this.downBtnId).enabled){return;}
                
                document.getElementById(this.downBtnId).src=this.relPath+this.down1;
                this.stopScroll = false;
                this.scrollStep = this.beginscrollStep;
                this.totalStep = 0;
                setTimeout(this.variableName+".beginScrollUp()", 100);
        }
        this.beginScrollUp = function()
        {
         var div = document.getElementById(this.panelID);
            if (this.stopScroll)
            {
                var begin = div.scrollLeft;
                var current = (parseInt(div.scrollLeft / this.itemHeight)+1) * this.itemHeight;
                if (0>current){current = 0;}
                 this.finishScrollEnded = false;
                var fn = this.variableName+".finishScroll("+(current - begin).toString() + ",1)";
                setTimeout(fn, 0);
                return;
            }
           
            
            div.scrollLeft += 5;
            this.scrollChanged();
            this.totalStep ++;
            if (this.totalStep == this.acselerationStep)
            {
                this.scrollStep -=this.acseleration;
                this.totalStep = 0;
            }
            
            if (0>this.scrollStep){this.scrollStep = 0;}
            setTimeout(this.variableName+".beginScrollUp()", this.scrollStep);
        }
        this.stopScrollUp = function()
        {
            this.stopScroll = true;
        }
        
        this.scrollDown = function()
        {
                if(!document.getElementById(this.upBtnId).enabled){return;}
                document.getElementById(this.upBtnId).src=this.relPath+this.top1;
                this.stopScroll = false;
                this.scrollStep = this.beginscrollStep;
                this.totalStep = 0;
                setTimeout(this.variableName+".beginScrollDown()", 100);
        }
        this.beginScrollDown = function()
        {
            var div = document.getElementById(this.panelID);
            if (this.stopScroll)
            {
                var begin = div.scrollLeft;
                var current = (parseInt(div.scrollLeft / this.itemHeight)) * this.itemHeight;
                if (0>current){current = 0;}
                 this.finishScrollEnded = false;
                var fn = this.variableName+".finishScroll("+(begin - current).toString() + ",-1)";
                setTimeout(fn, 0);
                return;
            }
            
            div.scrollLeft -= 5;
            this.scrollChanged();
            this.totalStep ++;
            if (this.totalStep == this.acselerationStep)
            {
                this.scrollStep -=this.acseleration;
                this.totalStep = 0;
            }
            
            if (0>this.scrollStep){this.scrollStep = 0;}
            setTimeout(this.variableName+".beginScrollDown()", this.scrollStep);
        }
        
        this.finishScroll = function(count, direction)
        {
            if (!this.stopScroll){return;}
            if (count == 0)
            {
             this.finishScrollEnded = true;
                return;
            }
            var div = document.getElementById(this.panelID);
            div.scrollLeft = div.scrollLeft + direction;
            this.scrollChanged();
            var fn = this.variableName+".finishScroll("+(count-1).toString() + "," + direction+")";
            setTimeout(fn, 5);
        }
        
        this.stopScrollDown = function()
        {
            this.stopScroll = true;
            
        }
       
        var downOvered = false;
        var upOvered = false;
        this.scrollChanged = function()
        {
        
             var div = document.getElementById(this.panelID);
             
             var div1 =getFirstChild(div);
            
             if (div.scrollLeft + div.offsetWidth >= div1.offsetWidth)
             {
  
                document.getElementById(this.downBtnId).src=this.relPath+this.down2;
                document.getElementById(this.downBtnId).enabled=false;
             }
             else
             {
                if(downOvered)
                {
                    document.getElementById(this.downBtnId).src=this.relPath+this.down1;
                }
                else
                {
                    document.getElementById(this.downBtnId).src=this.relPath+this.down3;
                }
                document.getElementById(this.downBtnId).enabled=true;
             }
             if (div.scrollLeft == 0)
             {
                document.getElementById(this.upBtnId).src=this.relPath+ this.top2;
                document.getElementById(this.upBtnId).enabled=false;
             }
             else
             {
                if(upOvered)
                {
                    document.getElementById(this.upBtnId).src=this.relPath+ this.top1;
                }
                else
                {
                    document.getElementById(this.upBtnId).src=this.relPath+this.top3;
                }
                document.getElementById(this.upBtnId).enabled=true;
             }
        }
        
        this.downOver = function()
        {
            downOvered = true;
            
             if(!document.getElementById(this.downBtnId).enabled)
             {
                return;
             }
             document.getElementById(this.downBtnId).src=this.relPath+this.down1;
        }
        this.downOut = function()
        {
         downOvered = false;
         this.stopScrollDown();
            if(!this.stopScroll){return;}
             if(document.getElementById(this.downBtnId).enabled)
             {
                document.getElementById(this.downBtnId).src=this.relPath+this.down3;
                return;
             }
             document.getElementById(this.downBtnId).src=this.relPath+this.down2;
        }
        
        this.upOver = function()
        {
            upOvered = true;
             if(!document.getElementById(this.upBtnId).enabled)
             {
                return;
             }
             document.getElementById(this.upBtnId).src=this.relPath+this.top1;
        }
        this.upOut = function()
        {
         upOvered = false;
         this.stopScrollUp();
            if(!this.stopScroll){return;}
             if(document.getElementById(this.upBtnId).enabled)
             {
                document.getElementById(this.upBtnId).src=this.relPath+this.top3;
                return;
             }
             document.getElementById(this.upBtnId).src=this.relPath+this.top2;
        }
}