var WebBox = new ClassWebBox();

function ClassWebBox()
{
    //Private Member
    var timer;
    var layer_Scroller;
    var iframe;
    var layer_ScrollerContainer;
    var layer_VCursor;
    var layer_VCursorContainer;
    var layer_HCursor;
    var layer_HCursorContainer;
    var layer_RowTitleBar;
    var layer_RowMainArea;
    var layer_StatusBar
    var layer_ExpandIcon;
    var layer_VScrollArea;
    var layer_HScrollArea;
    var input_VMove;
    var input_HMove;
    var scrollerVPos = 0;
    var scrollerHPos = 0;
    var vcursorPos = 0;
    var vcursorFrom = 0;
    var hcursorPos = 0;
    var hcursorFrom = 0;
    var expanded = true;
    var iframeMode = false;
    var expandIconImage;
    var collapseIconImage;
    var attributesLeft;
    var attributesRight;
    var animLeft;
    var animRight;
    var indexCounter = 0;
    var itemWidth;
    var itemCount;
    var selectedItem = 0;

    //Public Properties
    this.ID = '';
    this.ScrollSpeed = 50;

    //Public Method
    this.GetElements            = GetElements;
    this.AVSnap                 = AVSnap;
    this.AHSnap                 = AHSnap;
    this.AVScroll               = AVScroll;
    this.AHScroll               = AHScroll;
    this.AVScrollOnce           = AVScrollOnce;
    this.AHScrollOnce           = AHScrollOnce;
    this.CVScroll               = CVScroll;
    this.CHScroll               = CHScroll;
    //this.VScrollMax = VScrollMax;
    this.EndScroll              = EndScroll;
    this.RecursiveVScroll       = RecursiveVScroll;
    this.RecursiveHScroll       = RecursiveHScroll;
    this.MoveVCursor            = MoveVCursor;
    this.MoveHCursor            = MoveHCursor;
    this.VScroll                = VScroll;
    this.HScroll                = HScroll;
    this.VScrollCursor          = VScrollCursor;
    this.HScrollCursor          = HScrollCursor;
    this.DropCursor             = DropCursor;
    this.Refresh                = Refresh;
    this.Expand                 = Expand;
    this.ExpandOnHover          = ExpandOnHover;
    this.ShowBox                = ShowBox;
    this.HideBox                = HideBox;
    this.Populate               = Populate;
    this.UpdateEvents           = UpdateEvents;
    this.ExpandOrCollapseWebbox = ExpandOrCollapseWebbox;
    this.StartScroll            = StartScroll;

    //Get Layer
    function GetElements()
    {
        
        iframe = null;
        for( var i=0 ; i<window.frames.length ; i++ ) {
            try {
                if( window.frames[i].name == 'IframeScroller' + this.ID )
                {
                    iframe = window.frames[i];
                }
            } catch(ex) { /* the iframe must be from outsite our domain */ }
        }
        iframeMode = ( iframe != null );
        
        if( iframeMode )
        {
            layer_Scroller = iframe.window.document.getElementById('DivScroller' + this.ID);
        }
        else
        {
            layer_Scroller = document.getElementById('DivScroller' + this.ID);
        }
        
        
        layer_ScrollerContainer = document.getElementById('DivScrollerContainer' + this.ID);
        layer_RowTitleBar = document.getElementById('RowTitleBar' + this.ID);
        layer_RowMainArea = document.getElementById('RowMainArea' + this.ID);
        layer_StatusBar = document.getElementById('RowStatusBar' + this.ID);
        layer_ExpandIcon = document.getElementById('DivExpandIcon' + this.ID);

        if( document.getElementById('DivVCursor' + this.ID) )
        {
            layer_VScrollArea = document.getElementById('DivVSrollArea' + this.ID);
            layer_VCursor = document.getElementById('DivVCursor' + this.ID);
            layer_VCursorContainer = document.getElementById('DivVCursorContainer' + this.ID);
            if( layer_Scroller != null )
            {
                scrollerVPos = parseInt(layer_Scroller.style.top,10);
            }
            vcursorPos = parseInt(layer_VCursor.style.top,10);
            input_VMove = document.getElementById(this.ID + ':movey');
        }
        else
        {
            layer_VScrollArea = null;
            layer_VCursor = null;
            layer_VCursorContainer = null;
        }

        if( document.getElementById('DivHCursor' + this.ID) )
        {
            layer_HScrollArea = document.getElementById('DivHSrollArea' + this.ID);
            layer_HCursor = document.getElementById('DivHCursor' + this.ID);
            layer_HCursorContainer = document.getElementById('DivHCursorContainer' + this.ID);
            if( layer_Scroller != null )
            {            
                scrollerHPos = parseInt(layer_Scroller.style.left,10);
            }
            hcursorPos = parseInt(layer_HCursor.style.left,10);
            input_HMove = document.getElementById(this.ID + ':movex');
        }
        else
        {
            layer_HScrollArea = null;
            layer_HCursor = null;
            layer_HCursorContainer = null
        }

        // Horizontal Scroll Buttons
        attributesLeft = { left: { to: [(indexCounter + 1) * itemWidth]} };
        attributesRight = { left: { to: [(indexCounter - 1) * itemWidth]} };
        animLeft = new YAHOO.util.Anim(this.ID, attributesLeft, 0.5, YAHOO.util.Easing.easeOut);
        animRight = new YAHOO.util.Anim(this.ID, attributesRight, 0.5, YAHOO.util.Easing.easeOut);
    }

    //Snap to vertical position of mouse
    function AVSnap(ID, e)
    {
        function totalOffsetTop(element)  // Called only for Firefox
        {
            var t;

            t = 0;

            while (element)
            {
                t += element.offsetTop;
                element = element.offsetParent;
            }

            return t;
        }

        var y, t, b;

        this.ID = String(ID);
        this.GetElements();

        if (e.srcElement && e.srcElement != layer_VCursorContainer)
            return false;

        y = e.offsetY ? e.offsetY : e.pageY - totalOffsetTop(layer_VCursorContainer);

        if (layer_VCursor)
        {
            t = parseInt(layer_VCursor.style.top, 10);
            b = t + parseInt(layer_VCursor.style.height, 10);

            if (y > b)
            {
                this.VScrollCursor(y - b);
            }

            if (y < t)
            {
                this.VScrollCursor(y - t);
            }
        }
    }

    //Snap to horizontal position of mouse
    function AHSnap(ID, e)
    {
        function totalOffsetLeft(element)  // Called only for Firefox
        {
            var t;

            t = 0;

            while (element)
            {
                t += element.offsetLeft;
                element = element.offsetParent;
            }

            return t;
        }

        var x, l, r;

        this.ID = String(ID);
        this.GetElements();

        if (e.srcElement && e.srcElement != layer_HCursorContainer)
            return false;

        x = e.offsetX ? e.offsetX : e.pageX - totalOffsetLeft(layer_HCursorContainer);

        if (layer_HCursor)
        {
            l = parseInt(layer_HCursor.style.left, 10);
            r = l + parseInt(layer_HCursor.style.width, 10);

            if (x > r)
            {
                this.HScrollCursor(x - r);
            }

            if (x < l)
            {
                this.HScrollCursor(x - l);
            }
        }
    }

    //Start Vertical Scrolling using Arrows
    function AVScroll(ID, move)
    {
        this.ID = String(ID);
        this.GetElements();
        this.RecursiveVScroll(move);
    }

    //Start Horizontal Scrolling using Arrows
    function AHScroll(ID, move)
    {
        this.ID = String(ID);
        this.GetElements();
        this.RecursiveHScroll(move);
    }

    //Vertical Scrolling (one move only)
    function AVScrollOnce(ID, move)
    {
        this.ID = String(ID);
        this.GetElements();
        this.VScroll(move);
    }

    //Horizontal Scrolling (one move only)
    function AHScrollOnce(ID, move)
    {
        this.ID = String(ID);
        this.GetElements();
        this.HScroll(move);
    }

    //Recusive Vertical Scoll
    function RecursiveVScroll(move)
    {
        this.VScroll(move);
        timer = setTimeout('WebBox.RecursiveVScroll(' + move + ')', this.ScrollSpeed);
    }

    //Recusive Horizontal Scoll
    function RecursiveHScroll(move)
    {
        this.HScroll(move);
        timer = setTimeout('WebBox.RecursiveHScroll(' + move + ')', this.ScrollSpeed);
    }

    //Start Cursor Drag & Drop Vertical Scrolling
    function CVScroll(ID, e)
    {
        this.ID = String(ID);
        this.GetElements();
        vcursorFrom = (!document.all)? e.pageY : e.clientY + document.body.scrollLeft;
	    
        document.onmousemove = function(e){WebBox.MoveVCursor(e)};
        document.onmouseup = function(e){WebBox.DropCursor(e)};
        document.onselectstart = function(){return false;};
        document.onmousedown = function(){return false;};		    
    }

    //Start Cursor Drag & Drop Horizontal Scrolling
    function CHScroll(ID, e)
    {
        this.ID = String(ID);
        this.GetElements();
        hcursorFrom = (!document.all)? e.pageX : e.clientX + document.body.scrollTop;
	    
        document.onmousemove = function(e){WebBox.MoveHCursor(e)};
        document.onmouseup = function(e){WebBox.DropCursor(e)};
        document.onselectstart = function(){return false;};
        document.onmousedown = function(){return false;};		    
    }

    //*** Move Vertical from Cursor
    function MoveVCursor(e)
    {
		var toY = (!document.all)? e.pageY : event.clientY + document.body.scrollLeft;
		var cmove = toY - vcursorFrom;
		WebBox.VScrollCursor(cmove);
		vcursorFrom = toY;
		return(false);
    }

    //*** Move Vertical from Cursor
    function MoveHCursor(e)
    {
		var toX = (!document.all)? e.pageX : event.clientX + document.body.scrollTop;
		var cmove = toX - hcursorFrom;
		WebBox.HScrollCursor(cmove);
		hcursorFrom = toX;
		return(false);		
    }

    //*** Drop cursor
    function DropCursor()
    {
	    document.onmousemove = null;
	    document.onmouseup = null;
	    document.onselectstart=null;
	    document.onmousedown = null;
	    return(false);
    }

    //Stop any Scrolling
    function EndScroll()
    {
        if( timer )
        {
            clearTimeout(timer);
        }
    }
    //Vertical scroll Max Top or Bottom
    function VScrollMax(ID, move)
    {
        /*
        this.ID = String(ID);
        this.GetElements();
        var scrollerMovableArea = parseInt(layer_Scroller.offsetHeight,10) - parseInt(layer_ScrollerContainer.offsetHeight,10);
        var cursorMovableArea = parseInt(layer_CursorContainer.offsetHeight,10) - parseInt(layer_Cursor.style.height,10);
        if( scrollerMovableArea > 0 )
        {
            if( move > 0 ) //bottom arrow
            {
				scrollerPos = -scrollerMovableArea;
				cursorPos = cursorMovableArea;
				layer_Scroller.style.top = scrollerPos + 'px';
				layer_Cursor.style.top = cursorPos + 'px';
            }
            else if( move < 0 ) //up arrow
            {
                scrollerPos = 0;
                cursorPos = 0;
                layer_Scroller.style.top = scrollerPos + 'px';
                layer_Cursor.style.top = cursorPos + 'px';
            }
        }
        */
    }

    //*** Vertical Move Scroller Layer
    function VScroll(move)
    {
        var scrollerTop = parseInt(layer_Scroller.style.top,10);
        var vcursorTop = parseInt(layer_VCursor.style.top,10);
        var scrollerMovableArea = parseInt(layer_Scroller.offsetHeight,10) - parseInt(layer_ScrollerContainer.offsetHeight,10);
        var vcursorMovableArea = parseInt(layer_VCursorContainer.offsetHeight,10) - parseInt(layer_VCursor.style.height,10);
        var smove = Math.abs(move);
        var cmove = Math.abs((smove / scrollerMovableArea) * vcursorMovableArea);
        if( scrollerMovableArea > 0 )
        {
            if( move > 0 ) //bottom arrow
            {
                if( (scrollerTop - smove) > -scrollerMovableArea )
                {
                    scrollerVPos -= smove;
                    vcursorPos += cmove;
                    layer_Scroller.style.top = scrollerVPos + 'px';
                    layer_VCursor.style.top = vcursorPos + 'px';
                }
                else if( (scrollerTop) > -scrollerMovableArea )
                {
                    scrollerVPos = -scrollerMovableArea;
                    vcursorPos = vcursorMovableArea;
                    layer_Scroller.style.top = scrollerVPos + 'px';
                    layer_VCursor.style.top = vcursorPos + 'px';
                }
                else
                {
                    this.EndScroll();
                }

            }
            else if( move < 0 ) //up arrow
            {
                if ( (scrollerTop + smove) < 0 )
                {
                    scrollerVPos += smove;
                    vcursorPos -= cmove;
                    layer_Scroller.style.top = scrollerVPos + 'px';
                    layer_VCursor.style.top = vcursorPos + 'px';
                }
                else if ( scrollerTop < 0 )
                {
                    scrollerVPos = 0;
                    vcursorPos = 0;
                    layer_Scroller.style.top = scrollerVPos + 'px';
                    layer_VCursor.style.top = vcursorPos + 'px';
                }
                else
                {
                    this.EndScroll();
                }
            }

            input_VMove.value = Math.round(Math.abs(scrollerVPos));
        }
        else
        {
            layer_Scroller.style.top = '0px';
            layer_VCursor.style.top = '0px';
            this.EndScroll();
        }
    }

    //Horizontal Move Scroller Layer
    function HScroll(move)
    {
        var scrollerLeft = parseInt(layer_Scroller.style.left,10);
        var hcursorLeft = parseInt(layer_HCursor.style.left,10);
        var scrollerMovableArea = parseInt(layer_Scroller.offsetWidth,10) - parseInt(layer_ScrollerContainer.offsetWidth,10);
        var hcursorMovableArea = parseInt(layer_HCursorContainer.offsetWidth,10) - parseInt(layer_HCursor.style.width,10);
        var smove = Math.abs(move);
        var cmove = Math.abs((smove / scrollerMovableArea) * hcursorMovableArea);

        if( scrollerMovableArea > 0 )
        {
            if( move > 0 ) //left arrow
            {
                if( (scrollerLeft - smove) > -scrollerMovableArea )
                {
                    scrollerHPos -= smove;
                    hcursorPos += cmove;
                    layer_Scroller.style.left = scrollerHPos + 'px';
                    layer_HCursor.style.left = hcursorPos + 'px';
                }
                else if( (scrollerLeft) > -scrollerMovableArea )
                {
                    scrollerHPos = -scrollerMovableArea;
                    hcursorPos = hcursorMovableArea;
                    layer_Scroller.style.left = scrollerHPos + 'px';
                    layer_HCursor.style.left = hcursorPos + 'px';
                }
                else
                {
                    this.EndScroll();
                }

            }
            else if( move < 0 ) //right arrow
            {
                if ( (scrollerLeft + smove) < 0 )
                {
                    scrollerHPos += smove;
                    hcursorPos -= cmove;
                    layer_Scroller.style.left = scrollerHPos + 'px';
                    layer_HCursor.style.left = hcursorPos + 'px';
                }
                else if ( scrollerLeft < 0 )
                {
                    scrollerHPos = 0;
                    hcursorPos = 0;
                    layer_Scroller.style.left = scrollerHPos + 'px';
                    layer_HCursor.style.left = hcursorPos + 'px';
                }
                else
                {
                    this.EndScroll();
                }
            }

            input_HMove.value = Math.round(Math.abs(scrollerHPos));
        }
    }

    //Vertical Move Cursor Layer
    function VScrollCursor(cmove)
    {
        var scrollerMovableArea = parseInt(layer_Scroller.offsetHeight,10) - parseInt(layer_ScrollerContainer.offsetHeight,10);
        var vcursorMovableArea = parseInt(layer_VCursorContainer.offsetHeight,10) - parseInt(layer_VCursor.style.height,10);
        var move = ( (cmove / vcursorMovableArea) * scrollerMovableArea );
        this.VScroll(move);
    }


    //Horizontal Move Cursor Layer
    function HScrollCursor(cmove)
    {
        var scrollerMovableArea = parseInt(layer_Scroller.offsetWidth,10) - parseInt(layer_ScrollerContainer.offsetWidth,10);
        var hcursorMovableArea = parseInt(layer_HCursorContainer.offsetWidth,10) - parseInt(layer_HCursor.style.width,10);
        var move = ( (cmove / hcursorMovableArea) * scrollerMovableArea );
        this.HScroll(move);
    }
    
    
    function HideBox(ID)
    {
        if( document.getElementById('DivBoxOutArea' + ID) )
        {
            document.getElementById('DivBoxOutArea'+ID).style.display = 'none';
        }
        else if( document.getElementById('DivBoxArea' + ID) )
        {
            document.getElementById('DivBoxArea'+ID).style.display = 'none';
        }	 
        
        if(document.getElementById('WebPopDownTempFilter'))
        {
            document.getElementById('WebPopDownTempFilter').style.display = 'none';
        }
        
        if(document.getElementById('WebPopDownTemp'))
        {
            document.getElementById('WebPopDownTemp').style.display = 'none';
        }
    }
    
    function ShowBox(ID)
    {
        if( document.getElementById('DivBoxOutArea' + ID) )
        {
            document.getElementById('DivBoxOutArea'+ID).style.display = '';
        }
        else if( document.getElementById('DivBoxArea' + ID) )
        {
            document.getElementById('DivBoxArea'+ID).style.display = '';
        }	 
    }
    
    
    function Refresh(ID)
    {
        this.ID = String(ID);
        this.GetElements();    
        
        //Vertical scrollbar
        var blnVerticalVisible = true;
        var verticalMovableArea = parseInt(layer_Scroller.offsetHeight,10) - parseInt(layer_ScrollerContainer.offsetHeight,10);
        
        if( verticalMovableArea <= 0 )
        {
            blnVerticalVisible = false;
        }
        
        //alert(blnVerticalVisible + ' - ' + layer_VCursorContainer.style.display)
        
        if( blnVerticalVisible )
        {
            if( layer_VScrollArea.style.display == 'none' )
            {
                layer_VScrollArea.style.display = '';
                layer_VCursorContainer.style.display = '';
                layer_VCursor.style.display = '';
            }
        }
        else
        {
            if( layer_VScrollArea.style.display != 'none' )
            {
                layer_VScrollArea.style.display = 'none';
                layer_VCursorContainer.style.display = 'none';
                layer_VCursor.style.display = 'none';                
            }
        }
    }
    
    
    function Expand(ID, expandIcon, collapseIcon, iconWidth, iconHeight, shouldExpandOnHover)
    {
        this.ID = String(ID);
        this.GetElements(); 
        
        var expanded = true;
        
        if( layer_RowMainArea.style.display )
        {
            expanded = !( layer_RowMainArea.style.display == 'none' );
        }
              
        this.ExpandOrCollapseWebbox(expanded, expandIcon, collapseIcon);
    }
    
    function ExpandOnHover(ID, expandIcon, collapseIcon, iconWidth, iconHeight, shouldExpandOnHover) 
    {
        if (shouldExpandOnHover) 
        {
            this.UpdateEvents(ID);
        }
        this.Expand(ID, expandIcon, collapseIcon, iconWidth, iconHeight, shouldExpandOnHover);
    }

    //Performs the expanding or collapsing of the webbox
    function ExpandOrCollapseWebbox(expanded, expandIcon, collapseIcon) 
    {
        expandIconImage = new Image();
        expandIconImage.src = expandIcon;
        collapseIconImage = new Image();
        collapseIconImage.src = collapseIcon;

        if( expanded )
        {
            layer_RowMainArea.style.display = 'none';
            if( layer_StatusBar ) { layer_StatusBar.style.display = 'none'; }
            if( layer_ScrollerContainer ) { layer_ScrollerContainer.style.display = 'none'; }
            if( layer_VCursorContainer ) { layer_VCursorContainer.style.display = 'none'; }
            if( layer_HCursorContainer ) { layer_HCursorContainer.style.display = 'none'; }
            if( layer_VScrollArea ) { layer_VScrollArea.style.display = 'none'; }
            if( layer_HScrollArea ) { layer_HScrollArea.style.display = 'none'; }
            
            layer_ExpandIcon.getElementsByTagName("img")[0].src = expandIconImage.src;
        }
        else
        {
            layer_RowMainArea.style.display = '';
            if( layer_StatusBar ) { layer_StatusBar.style.display = ''; }
            if( layer_ScrollerContainer ) { layer_ScrollerContainer.style.display = ''; }
            if( layer_VCursorContainer ) { layer_VCursorContainer.style.display = ''; }
            if( layer_HCursorContainer ) { layer_HCursorContainer.style.display = ''; }
            if( layer_VScrollArea ) { layer_VScrollArea.style.display = ''; }
            if( layer_HScrollArea ) { layer_HScrollArea.style.display = ''; }
            
            layer_ExpandIcon.getElementsByTagName("img")[0].src = collapseIconImage.src;
        }
    }
    
    //*** Updates the on-hover-expand-webbox onmouseover and onmouseout events
    function UpdateEvents(ID) 
    {
        tableElement = document.getElementById("Table" + ID);
        divElement = document.getElementById("DivScrollerContainer" + ID);
        if (divElement == null) 
        {
            divElement = document.getElementById("divMainArea" + ID);
        }
      
        if (tableElement != null && tableElement.onmouseover != null && tableElement.onmouseover.toString().indexOf("Expand") >= 0) {
            if (navigator.userAgent.indexOf('MSIE') > 0) {
                tableElement.onmouseover = function anonymous() { javascript: void (0); };
                tableElement.onmouseout = function anonymous() { javascript: void (0); };
            }
            else {
                tableElement.onmouseover = function onmouseover(event) { javascript: void (0); };
                tableElement.onmouseout = function onmouseout(event) { javascript: void (0); };
            }
            divElement.onmouseover = tableElement.onmouseover;
            divElement.onmouseout = tableElement.onmouseout;
        }
    }
    
    //Populate Content
    function Populate(ID, backColor)
    {
        this.ID = String(ID);
        this.GetElements();
            
        var divHtml = document.getElementById('TextAreaHTMLContent' + this.ID);
        var html = '';
        var headHtml = '';
        
        var elems = document.getElementsByTagName('head');
        if( elems.length > 0 )
        {
            headHtml = elems[0].innerHTML;
        }
        
        if( divHtml != null && iframe != null )
        {
            iframe.window.document.open();
            iframe.window.document.write('<html><head>' + headHtml + '<base target="_top"></head><body style="background-color: transparent; margin: 0px; padding: 0px;">' + divHtml.innerHTML + '</body></html>');
            iframe.window.document.close();            
        }
    }

    function StartScroll(source, ID, weblistId, dynamicWebListItemWidth, dynamicWebListItemCount, borderColour) {
        itemWidth = dynamicWebListItemWidth;
        itemCount = dynamicWebListItemCount;
        this.ID = String(ID);
        this.GetElements();
        var itemArray = new Array();
        var element = null;

        try {
            // Draw a border around the selected item
            var webboxId = this.ID.match(/\d/g).join("");

            // Clear the previous item's border
            // Community View Page
            element = document.getElementById("LIrowWebBox" + webboxId + "_webSearchDynamics_component_" + webboxId + "_dynamicWebList_" + selectedItem);
        } catch (ex){ }
        
        // Object View Page
        if (element == null) {
            // The DOM is is a <table><tbody><tr> structure, so search it for the item elements
            var weblistElement = document.getElementById("LImain" + weblistId);
            var counter = 0;
            var tableElement;
            var tbodyElement;
            var trElement;

            for (var i = 0; i < weblistElement.childNodes.length; i++) {
                if (weblistElement.childNodes[i] != null && weblistElement.childNodes[i].tagName != null) {
                    tableElement = weblistElement.childNodes[i];
                    
                    for (var j = 0; j < tableElement.childNodes.length; j++) {
                        if (tableElement.childNodes[j] != null && tableElement.childNodes[j].tagName != null) {
                            tbodyElement = tableElement.childNodes[j];

                            for (var k = 0; k < tbodyElement.childNodes.length; k++) {
                                if (tbodyElement.childNodes[k] != null && tbodyElement.childNodes[k].tagName != null) {
                                    trElement = tbodyElement.childNodes[k];

                                    for (var l = 0; l < trElement.childNodes.length; l++) {
                                        if (trElement.childNodes[l] != null && trElement.childNodes[l].tagName != null) {
                                            itemArray[counter++] = trElement.childNodes[l];
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }                        
            element = itemArray[selectedItem];
        }

        if (element != null) {
            element.style.border = "";
        }

        // Update the selectedItem if it is within range
        if (source == 'left' && selectedItem > 0) {
            selectedItem -= 1;
        }
        else if (source == 'right' && selectedItem < itemCount - 1) {
            selectedItem += 1;
        }
        
        element = document.getElementById("LIrowWebBox" + webboxId + "_webSearchDynamics_component_" + webboxId + "_dynamicWebList_" + selectedItem);
        if (element == null && itemArray.length > 0) {
            element = itemArray[selectedItem];
        }
        if (element != null) {
            element.style.border = "solid 1px " + borderColour;
        }

        // Return if the first item is selected and the left button is clicked
        if (source == 'left' && indexCounter == 0) {
            return;
        }

        var totalItemsDisplayed = Math.round(parseInt(document.getElementById(this.ID).style.width) / itemWidth);

        // Return if the last item is selected and the right button is clicked
        if (source == 'right' && (indexCounter - totalItemsDisplayed <= -itemCount)) {
            return;
        }
        
        // Update the indexCounter and animate
        indexCounter = (source == 'right') ? indexCounter - 1 : indexCounter + 1;
        if (source == 'left') {
            javascript: animLeft.animate();
        }
        else {
            javascript: animRight.animate();
        }
    }
}