$(document).ready(function() { 
    
    /*****************/
    /* SOME GLOBALS: */
    /*****************/
    
    var oTimeout            = null;
    
    var oScrollContainer    = $('#showcases');
    var oScrollWrapper      = $('.scroll-wrapper',oScrollContainer);
    var oScrollArea         = $('.scroll-area',oScrollWrapper);
    var aScrollItems        = oScrollArea.children();

    var iTotalItemWidth = 0;
    $.each(aScrollItems, function() { 
            iTotalItemWidth += $(this).outerWidth(true); //true = include margin
    });

    /******************/
    /* SOME FUNCTIONS */
    /******************/

    prepairScrollArea = function()
    {
        //default area width should be the total item width, nomatter what is set in the css
        var iDefaultAreaWidth = iTotalItemWidth;
        
        //make sure the scroll area width is atleast twice the visible width 
        var iVisibleAreaWidth = oScrollWrapper.width();
        var iMinAreaWidth = (iVisibleAreaWidth * 2)
        
        var iAreaWidth = iDefaultAreaWidth;
        while(iAreaWidth < iMinAreaWidth) {
            iAreaWidth = (iAreaWidth + iAreaWidth);
        }

        //set the scoll-area width:
        oScrollArea.width(iAreaWidth);
        
        //set the necessary css:
        oScrollWrapper.css('position','absolute');//for positioning the child
        oScrollArea.css('position','absolute');
        oScrollArea.css('left','0');
        
        //now fill up the scroll area width items
        var iNumberOfAppends = ((iAreaWidth / iDefaultAreaWidth) - 1);
        
        for(i=iNumberOfAppends;i>0;i--) {
            
            $.each(aScrollItems,function(){//NOTICE: Could not figure out a way to append an whole array of elements, so I loop...
                    
                    var htmlString = '<li>' + $(this).html(); + '</li>'; //NOTICE: THis is an obvious HACK, could not figure out a way to get the objects full html (only inner), so I manually put the <li> around the inner html 
                    oScrollArea.append(htmlString);
            });
        }
    }
    
    scrollScrollArea = function()
    {
        var iPos = oScrollArea.position().left;
        var iNewPos = (iPos - 1);

        if(iNewPos + iTotalItemWidth == 0) { //we are round: reset position
            iNewPos = 0;
        }
        
        oScrollArea.css('left',iNewPos);
        
        oTimeout = setTimeout("scrollScrollArea()", 50); //run again in x miliseconds
    }
    
    setMouseHover = function()
    {
        oScrollWrapper.hover(
                            function() {
                                clearTimeout(oTimeout);
                            },
                            function() {
                                scrollScrollArea();
                            }
            
            );
    }
    
    /********************/
    /* NOW DO THE MAGIC */
    /********************/
     
    //if the item width = 0 there are no items: Do nothing
    if(iTotalItemWidth > 0) {
        prepairScrollArea();
        setMouseHover();
        scrollScrollArea(); //begin te scrollen
    }
    

});