var WidgetBarTemplate = {horizontal: 0, vertical: 1}; //defines type of bar to create
var WidgetBarDirection = {up: 0, left: 1, down: 2, right: 3};    //defines the directions a widget bar can be shifted.

/*
    Extended Prototype class allows you to set opacity on a non-existand DOM element
*/
var setElementOpacity = function(element, value)
{
    element.style.opacity = (value == 1 || value === '') ? '' : (value < 0.00001) ? 0 : value;
    return element;
}
  
/*
    Extended Prototype class allows you to set CSS styles on a non-existand DOM element
*/
var setElementStyle = function(element, styles)
{
    var elementStyle = element.style, match;
    if (Object.isString(styles)) {
      element.style.cssText += ';' + styles;
      return styles.include('opacity') ? 
        element.setOpacity(styles.match(/opacity:\s*(\d?\.?\d*)/)[1]) : element;
    }
    for (var property in styles)
    {
      //if (styles[property] != null)
      //{
        /** for FireFox compatability styles must be passed as strings with units
            for ie this does not work so numeric values need to be convereted
        **/
          var val = styles[property];
          //alert('styles[' + property = ']' + ' = ' + val)
          if(
                Prototype                   //** make sure the prototype object exists, if not then 
                &&
                Prototype.Browser.IE==false //** check that the browser is NOT IE
                &&
                isNaN(val)==false           //** 
                &&  //** list properties that eval to a num but should not be in px
                (
                    property != 'zIndex'
                )
            )    
                val = val + 'px';
      
          if (property == 'opacity') element.setOpacity(styles[property]);
          else
            elementStyle[(property == 'float' || property == 'cssFloat') ?
              (Object.isUndefined(elementStyle.styleFloat) ? 'cssFloat' : 'styleFloat') :
                property] = val;
//            elementStyle[(property == 'float' || property == 'cssFloat') ?
//              (Object.isUndefined(elementStyle.styleFloat) ? 'cssFloat' : 'styleFloat') :
//                property] = styles[property];
      //}
      }
            
    return element;
}


/*
    Pre-Defined CSS styles to set to an Object
*/
function StyleProperties(args)
    {
         this.left            = (args.left            != null) ? args.left            : null;
         this.right           = (args.right           != null) ? args.right           : null;
         this.top             = (args.top             != null) ? args.top             : null;
         this.bottom          = (args.bottom          != null) ? args.bottom          : null;
         this.width           = (args.width           != null) ? args.width           : null;
         this.height          = (args.height          != null) ? args.height          : null;
         this.display         = (args.display         != null) ? args.display         : null;
         this.visibility      = (args.visibility      != null) ? args.visibility      : null;
         this.zIndex          = (args.zIndex          != null) ? args.zIndex          : null;
         this.border          = (args.border          != null) ? args.border          : null;
         this.backgroundColor = (args.backgroundColor != null) ? args.backgroundColor : null;
         this.className       = (args.className       != null) ? args.className       : null; 
         this.backgroundImage = (args.backgroundImage != null) ? args.backgroundImage : null; 
    };

/*=====================================================================================
    Widget Bar Class
---------------------------------------------------------------------------------------*/
function WidgetBar()
{
    this.widgetBarID;                                       // Widget Bar ID
    this.widgetBarTemplate;                                 // (apearence) Template to use when creating the bar
    this.widgets            = [];                           // Array of widgets inside the widget bar
    this.widgetID;                                          // Prefix for all Widget ID's for this bar
    this.parentID;                                          // Parent element where bar will be painted
    this.element;                                           // In-Memory element that will be displayed in the DOM
    this.backgroundImage    = "";                           // image to be used as background for widget bar
    
    this.buffer             = 10;                           //Number of widgets to load from ajax on 1 call
    this.viewable           = 5;                            //Number of viewable widgets at 1 time (while NOT moving)
    this.initIndex          = 0;                            //Number of the first widget (Position 0) on the screen Ex: load widgets 0-4, 0 is the initIndex
    this.selectedIndex      = 0;                            //Index of the widget that is currently Selected
    this.selectedCategoryID = 0;                            //CategoryID of the selected Widget
    this.widgetPadding      = 10;                           //Numerical padding between each widget (will be converted to PX automaticaly)

    this.styleProperties    = {};
    this.widgetProperties   = {};
    this.images             = [];                           // Array of images that have loaded to determine if all necessary images for widgets have loaded
    
    this.divLeftID;      // Left div ID Holds the img / btn that is on the left side
    this.divRightID;     // right div ID Holds the img / btn that is on the right side
    this.divTopID;       // top div ID Holds the img / btn that is on the top
    this.divBottomID;    // bottom div ID Holds the img / btn that is on the bottom
    this.divWidgetBarID; // "Widget Window" where all the widgets will be painted
    this.divHighlightID; // higlighter div
    
    this.divLeftProperties         = new StyleProperties({}); /*************************************************** */
    this.divRighgtProperties       = new StyleProperties({}); //
    this.divTopProperties          = new StyleProperties({}); // These are the CSS style properties of each DIV
    this.divBottomProperties       = new StyleProperties({}); //
    this.divWidgetWindowProperties = new StyleProperties({}); /*************************************************** */
    
    /*
         styleProperties: collection of CSS style properties to set to the bar using the setElementStyle();
    */
    this.setBarProperties = function(args) {
             this.styleProperties = (args.styleProperties != null) ? args.styleProperties : new StyleProperties({});
             this.buffer                            = (args.buffer                          != null) ? args.buffer                          : null;
             this.viewable                          = (args.viewable                        != null) ? args.viewable                        : null;
             this.initIndex                         = (args.initIndex                       != null) ? args.initIndex                       : null;
             this.widgetPadding                     = (args.widgetPadding                   != null) ? args.widgetpadding                   : null;
             this.backgroundImage                   = (args.backgroundImage                 != null) ? args.backgroundImage                 : null;
             //this.widgetBackgroundImage             = (args.widgetBackgroundImage           != null) ? args.widgetBackgroundImage           : null;
             //this.widgetBackgroundImageRollover     = (args.widgetBackgroundImageRollover   != null) ? args.widgetBackgroundImageRollover   : null;
             //this.widgetBackgroundImageSelect       = (args.widgetBackgroundImageSelect     != null) ? args.widgetBackgroundImageSelect     : null;
         };
    
    /*
        creates an object of properties to use for widgets
         widgetTemplate : Template to use for the wodgets
         styleProperties: collection of CSS style properties to set to the bar using the setElementStyle();
    */
    this.setWidgetProperties = function(args) {
             this.widgetProperties = (args  != null) ? args  : null;
             //this.widgetProperties.styleProperties = (args.styleProperties != null) ? args.styleProperties : new StyleProperties({});
         };
    
    /*
        init function sets the default values that are passed in when creating the widgetbar
    */     
    this.init = function( parentID, widgetBarIDx, widgetBarTemplate, barProperties, widgetProperties)
    {
        //alert("Bar.init()");
        //set / create the widgetbar ID
        this.widgetBarID = widgetBarIDx;
        this.widgetID = this.widgetBarID+"_Widget_";
        
        this.divLeftID        = this.widgetBarID+"_Left";   // Left div ID Holds the img / btn that is on the left side
        this.divRightID       = this.widgetBarID+"_Right";  // right div ID Holds the img / btn that is on the right side
        this.divTopID         = this.widgetBarID+"_Top";    // top div ID Holds the img / btn that is on the top
        this.divBottomID      = this.widgetBarID+"_Bottom"; // bottom div ID Holds the img / btn that is on the bottom
        this.divWidgetBarID   = this.widgetBarID+"_Window"; // "Widget Window" where all the widgets will be painted
        this.divHighlightID   = this.widgetBarID+"_HLT";    // "floating div to be used for highlighting a selection
        
        //check to see if the bar is alreay existant in memory (NOT IN DOM)
        if($(this.widgetBarID) == null)
        {
            // sets the parent ID, template, bar / widget properties
            this.parentID          = parentID;
            this.widgetBarTemplate = widgetBarTemplate;             
            this.setBarProperties(barProperties);
            this.setWidgetProperties(widgetProperties);

            this.create();
        }         
    };
    /*
        create the widgetbar in memory (NOT IN THE DOM)
    */
    this.create = function()
    {
        //alert("bar.create()");
        // first check the page to see if this widget exists on the page
        if($(this.widgetBarID) == null)
        {
            // based on template load the select bar to DOM
            switch(this.widgetBarTemplate)
            {
                case WidgetBarTemplate.horizontal: 
                    this.element = this.buildHorizontalBar(); 
                    break;
                    
                case WidgetBarTemplate.vertical:   
                    this.element = this.buildVerticalBar(); 
                    break;
                
                default:
                  return false;
            }
                       
            return true;
        }
        else
        {
            return $(this.widgetBarID);
	        //return false;
	    }
    };
    
            /*
                if template is horizontal
            */
            this.buildHorizontalBar = function()
            {
                //alert("Built H bar");
                //create the container div
                var containerDiv = document.createElement('div');
                
                //set container div ID
                containerDiv.id = this.widgetBarID;
                
                //set container bg image
                containerDiv.style.backgroundImage = this.backgroundImage;
                
                //create left, right, and middle divs
                var leftDiv   = this.buildDivLeft();
                var rightDiv  = this.buildDivRight();
                var middleDiv = this.buildHorizontalWidgetDiv();
                
                containerDiv.appendChild(leftDiv);   /******************************************** */
                containerDiv.appendChild(middleDiv); // attach the left, middle, right to container
                containerDiv.appendChild(rightDiv);  /******************************************** */

                return containerDiv; //return container to this.create
            }
            
            /*
                create the left Div
            */
            this.buildDivLeft = function()
            {
                //alert("built left div");
                //create left div in memory (NOT IN THE DOM)
                var leftDiv = document.createElement('div');
                
                // set left Div ID
                leftDiv.id = this.divLeftID;  
               
                // set left div required CSS properties
                var style = {
                    position: 'absolute',
                    height: '100%',
                    width: '5%',
                    display: 'block',
                    visibility: 'visible',
                    verticalAlign: 'middle',
                    textAlign: 'center',
                    zIndex: 50,
                    visibility: 'visible',
                    backgroundColor: 'Transparent'
                }
                setElementStyle(leftDiv, style);
                
                //create a inenrdiv that will contain left div's content
                var innerDiv = document.createElement('div');
                style = {
                    position: 'absolute',
                    left: '17%',
                    top: '35%',
                    width: '65%',
                    display: 'block',
                    visibility: 'visible',
                    verticalAlign: 'middle',
                    cursor: 'hand',
                    cursor: 'pointer'
                }
                setElementStyle(innerDiv, style);
                
                //create the image button
                var leftButtonImg = document.createElement('img');
                leftButtonImg.src = GlobalVars.GlobalScreen.Repository + 'CK' + GlobalVars.GlobalScreen.CustomerKey + "/Images/arrow_left.gif";     
                leftButtonImg.alt = "Previous " + this.viewable;
                leftButtonImg.height = 20;
                leftButtonImg.width = 20;
                
                //add the image event handler
                var direction = WidgetBarDirection.left;
                leftButtonImg.onclick = function(){return __shiftHorizontal(direction); };
                
//                innerDiv.style.backgroundColor = 'Transparent';
//                leftDiv.style.backgroundColor = 'Transparent';
                
                innerDiv.appendChild(leftButtonImg);    // add img to innerdiv, and innerdiv to left div in memory (NOT IN DOM)
                leftDiv.appendChild(innerDiv);     
                
                return leftDiv; // return left div to this.buildHorizontalBar
            }
            
            /*
                create the right Div
            */    
            this.buildDivRight = function()
            {
                //alert("build right div");
                //create right div in memory (NOT IN THE DOM)
                var rightDiv = document.createElement('div');
                
                // set right Div ID
                rightDiv.id = this.divRightID;
               
                // set right div required CSS properties
                var style = {
                    position: 'absolute',
                    height: '100%',
                    width: '5%',
                    left: '95%',
                    display: 'block',
                    visibility: 'visible',
                    verticalAlign: 'middle',
                    textAlign: 'center',
                    zIndex: 50,
                    visibility: 'visible',
                    backgroundColor: 'Transparent'
                }
                setElementStyle(rightDiv, style);
                
                //create a inenrdiv that will contain right div's content
                var innerDiv = document.createElement('div');
                style = {
                    position: 'absolute',
                    left: '17%',
                    top: '35%',
                    width: '65%',
                    display: 'block',
                    visibility: 'visible',
                    verticalAlign: 'middle',
                    cursor: 'hand',
                    cursor: 'pointer'
                }
                setElementStyle(innerDiv, style);
                
                //create the image button
                var rightButtonImg = document.createElement('img');
                rightButtonImg.src = GlobalVars.GlobalScreen.Repository + 'CK' + GlobalVars.GlobalScreen.CustomerKey + "/Images/arrow_right.gif";     
                rightButtonImg.alt = "Next " + this.viewable;
                rightButtonImg.height = 20;
                rightButtonImg.width = 20;
                
                //add the image event handler
                var direction = WidgetBarDirection.right;
                rightButtonImg.onclick = function(){return __shiftHorizontal(direction); };
                
                innerDiv.appendChild(rightButtonImg);    // add img to innerdiv, and innerdiv to right div in memory (NOT IN DOM)
                rightDiv.appendChild(innerDiv);     
                
                return rightDiv; // return right div to this.buildHorizontalBar
            }
            
            /*
                create horizontal widget window div
            */
            this.buildHorizontalWidgetDiv = function()
            {        
                //alert("build horizontal window");
                //create the middle div
                var middleDiv = document.createElement('div');
                
                // set middle div's ID
                middleDiv.id  = this.divWidgetBarID;
                
                var style = {
                    position: 'absolute',
                    height: '96%',
                    width: '90%',
                    left: '5%',
                    top: '2%',
                    display: 'block',
                    visibility: 'visible',
                    verticalAlign: 'middle',
                    textAlign: 'center',
                    zIndex: 50,
                    visibility: 'visible',
                    backgroundColor: '#EEEEEE'
                }
                setElementStyle(middleDiv, style);
                
                //widgets added below
               
                var highlightDiv = document.createElement('div');
                highlightDiv.id = this.divHighlightID;
                style = {
                    position: 'absolute',
                    display: 'none',
                    visibility: 'hidden',
                    zIndex: 49,
                    backgroundColor: (this.widgetBarTemplate == WidgetBarTemplate.horizontal) ? '#FFF000' : '#000FFF'
                }
                setElementStyle(highlightDiv, style);
                middleDiv.appendChild(highlightDiv);
                
                return middleDiv; // return widget widonw div to this.buildHorizontalBar
            }
            
            // create vertical bar
            this.buildVerticalBar = function()
            {
                //alert("Built V bar");
                //create the container div
                var containerDiv = document.createElement('div');
                
                //set container div ID
                containerDiv.id = this.widgetBarID;
                
                //set container bg image
                containerDiv.style.backgroundImage = this.backgroundImage;
                
                //create left, right, and middle divs
                var firstDiv   = this.createDivTop();
                var thirdDiv  = this.createDivBottom();
                var secondDiv = this.createVerticalWidgetDiv();
                
                containerDiv.appendChild(firstDiv);   /******************************************** */
                containerDiv.appendChild(secondDiv); // attach the left, middle, right to container
                containerDiv.appendChild(thirdDiv);  /******************************************** */

                return containerDiv; //return container to this.create
            }
            
            // create top div    
            this.createDivTop = function()
            {
                //alert("built left div");
                //create left div in memory (NOT IN THE DOM)
                var topDiv = document.createElement('div');
                
                // set left Div ID
                topDiv.id = this.divTopID;  
               
                // set left div required CSS properties
                var style = {
                    position: 'absolute',
                    height: '5%',
                    width: '100%',
                    display: 'block',
                    visibility: 'visible',
                    verticalAlign: 'middle',
                    textAlign: 'center',
                    zIndex: 50,
                    visibility: 'visible',
                    backgroundColor: 'Transparent'
                }
                setElementStyle(topDiv, style);
                
                //create a inenrdiv that will contain left div's content
                var innerDiv = document.createElement('div');
                style = {
                    position: 'absolute',
                    left: '40%',
                    top: '10%',
                    height: '65%',
                    display: 'block',
                    visibility: 'visible',
                    verticalAlign: 'middle',
                    cursor: 'hand',
                    cursor: 'pointer'
                }
                setElementStyle(innerDiv, style);
                
                //create the image button
                var topButtonImg = document.createElement('img');
                topButtonImg.src = GlobalVars.GlobalScreen.Repository + 'CK' + GlobalVars.GlobalScreen.CustomerKey + "/Images/arrow_up.gif";     
                topButtonImg.alt = "Previous " + this.viewable;
                topButtonImg.height = 20;
                topButtonImg.width = 20;
                
                //add the image event handler
                var direction = WidgetBarDirection.up;
                topButtonImg.onclick = function(){return __shiftVertical(direction); };
                
                innerDiv.appendChild(topButtonImg);    // add img to innerdiv, and innerdiv to left div in memory (NOT IN DOM)
                topDiv.appendChild(innerDiv);     
                
                return topDiv; // return left div to this.buildHorizontalBar
            }
            
            // create bottom div
            this.createDivBottom = function()
            {
                //alert("build right div");
                //create right div in memory (NOT IN THE DOM)
                var bottomDiv = document.createElement('div');
                
                // set right Div ID
                bottomDiv.id = this.divBottomID;
               
                // set right div required CSS properties
                var style = {
                    position: 'absolute',
                    height: '5%',
                    width: '100%',
                    top: '95%',
                    display: 'block',
                    visibility: 'visible',
                    verticalAlign: 'middle',
                    textAlign: 'center',
                    zIndex: 50,
                    visibility: 'visible',
                    backgroundColor: 'Transparent'
                }
                setElementStyle(bottomDiv, style);
                
                //create a inenrdiv that will contain right div's content
                var innerDiv = document.createElement('div');
                style = {
                    position: 'absolute',
                    left: '40%',
                    top: '-3',
                    height: '65%',
                    display: 'block',
                    visibility: 'visible',
                    verticalAlign: 'middle',
                    cursor: 'hand',
                    cursor: 'pointer'
                }
                setElementStyle(innerDiv, style);
                
                //create the image button
                var downButtonImg = document.createElement('img');
                downButtonImg.src = GlobalVars.GlobalScreen.Repository + 'CK' + GlobalVars.GlobalScreen.CustomerKey + "/Images/arrow_down.gif";     
                downButtonImg.alt = "Next " + this.viewable;
                downButtonImg.height = 20;
                downButtonImg.width = 20;
                
                //add the image event handler
                var direction = WidgetBarDirection.right;
                downButtonImg.onclick = function(){return __shiftVertical(direction); };
                
                innerDiv.appendChild(downButtonImg);    // add img to innerdiv, and innerdiv to right div in memory (NOT IN DOM)
                bottomDiv.appendChild(innerDiv);     
                
                return bottomDiv; // return right div to this.buildHorizontalBar 
            }
            
            // create vertical widget window
            this.createVerticalWidgetDiv = function()
            {
                //alert("build vertical window");
                //create the middle div
                var middleDiv = document.createElement('div');
                
                // set middle div's ID
                middleDiv.id  = this.divWidgetBarID;
                
                var style = {
                    position: 'absolute',
                    height: '90%',
                    width: '96%',
                    top: '5%',
                    left: '2%',
                    display: 'block',
                    visibility: 'visible',
                    verticalAlign: 'middle',
                    textAlign: 'center',
                    zIndex: 50,
                    visibility: 'visible',
                    backgroundColor: '#EEEEEE'
                }
                setElementStyle(middleDiv, style);
                
                //widgets added below
               
                var highlightDiv = document.createElement('div');
                highlightDiv.id = this.divHighlightID;
                style = {
                    position: 'absolute',
                    display: 'none',
                    visibility: 'hidden',
                    zIndex: 49,
                    backgroundColor: '#FFF000'
                }
                setElementStyle(highlightDiv, style);
                middleDiv.appendChild(highlightDiv);
                
                return middleDiv; // return widget widonw div to this.buildHorizontalBar
            }         

    /*
        puts the container into the DOM and sets is properties
    */
    this.displayHorizontalBar = function(styles)
    {
        //alert("display h bar");
        //override classes styles if passed as parameter
        (styles) ? styles = styles : styles = this.styleProperties;
        
        //display the element in the DOM
        $(this.parentID).appendChild(this.element);
        
        //set user-defined css properties on container
        setElementStyle(this.element, styles);
        
        //set the Loading Information in
        //this.setLoading(true);
    }
            
    /*
        puts the container into the DOM and sets is properties
    */
    this.displayVerticalBar = function(styles)
    {
        //override classes styles if passed as parameter
        (styles) ? styles = styles : styles = this.styleProperties;
        
        //display the element in the DOM
        $(this.parentID).appendChild(this.element);
        
        //set user-defined css properties
        setElementStyle(this.element, styles);
        
        //set the Loading Information in
        this.setLoading(true);
    }

    AppendLoadWidgets(this);
    // create a widget
    /* this.loadWidgets = function(type, direction)
    {
        //** Loads the Widgets
        //** paramaters:
        //**            type        - 
        //**            direction   -
        
        //alert('type = ' + type);
        //alert('direction = ' + direction);
        //alert("getting widgets");
        //turn off the highlight div
        this.highlight(false);
        
        //only call ajax if one of the widgets is null
        if(!this.setParameters(direction))
        {
            var returnObj = new Object();
            return __onLoadComplete(returnObj, type, direction);
        }
        
        //alert("Loading Started");
        //var params = 'currentIndex='+this.initIndex+'&amountToLoad='+this.buffer;
        //alert('..selectedIndex = ' + WidgetBars[WidgetBarTemplate.horizontal].selectedIndex);
        var customerKey = $("hdnCustomerKey").value;
        var params = 'customerKey='+customerKey+'&type='+type+'&parentCategoryID='+WidgetBars[WidgetBarTemplate.horizontal].selectedCategoryID+'&currentIndex='+this.initIndex+'&amountToLoad='+this.buffer;
        //alert("Load Widgets Parameters: " + params);
        //new Ajax.Request('http://localhost/eCommerce/Shopping.asmx/PopulateWidgets',
        new Ajax.Request('Shopping.asmx/PopulateWidgets',
            {
                method:'post',
                parameters: params,
                onComplete: function(transport)
                {
                    if(transport.status == 200)
                    {
//                        alert('ajax sucesss!');
                        var returnObj = new Object();
                        var returnObj = ((transport.responseXML.text) ? transport.responseXML.text.evalJSON() : transport.responseXML.lastChild.textContent.evalJSON());
                        __onLoadComplete(returnObj, type, direction);
                    }
                    else
                    {
                         __logError('Load WidgetBar Complete Failed:'+ transport.status, '', '', _customerKey, personId, false);
                    }
                },
                onFailure: function(transport) { __logError('Load WidgetBar Ajax Failed:'+ transport.status, '', '', _customerKey, personId, false); }
             });
    } */
    
    //** This will remove the bar from memory
    this.remove = function()
    {
        alert('WidgerBar.remove()');
    }
    
    AppendSetParameters(this);
    
    //set init index for ajax call; returns true if need to load, otherwise returns false
    /* this.setParameters = function(direction)
    {
        //alert("Starting Init Index: " + this.initIndex + "\nDirection: " + direction + "\nTotal Widgets:" + this.totalWidgets);
        //set init index based upon viewable buffer
        switch(direction)
        {
            case WidgetBarDirection.down:
            case WidgetBarDirection.right:
                //alert("right/down shift");
                if((this.initIndex + this.viewable) >= this.totalWidgets)
                    this.initIndex = this.initIndex + this.viewable - this.totalWidgets;
                else
                    this.initIndex = this.initIndex + this.viewable;
                    
                this.selectedIndex = this.initIndex;
                break;
                
            case WidgetBarDirection.up:
            case WidgetBarDirection.left:
//                alert(
//                    "left/up shift"
//                    + "\ninitIndex: " + this.initIndex
//                    + "\nviewable: " + this.viewable
//                    + "\nselectedIndex: " + this.selectedIndex
//                    + "\ntotalWidgets: " + this.totalWidgets
//                );
                if((this.initIndex - this.viewable) < 0)
                    this.initIndex = this.totalWidgets - (this.viewable-this.initIndex);
                    //this.initIndex = this.initIndex + this.viewable - 1;//this.initIndex = this.initIndex - this.viewable + this.totalWidgets;
                else
                    this.initIndex = this.initIndex - this.viewable;
                    
                //** set the selected index
                if(this.initIndex + this.viewable>this.totalWidgets)
                    this.selectedIndex = (this.viewable-1)-(this.totalWidgets-this.initIndex);//this.selectedIndex = this.totalWidgets - this.viewable;
                else
                    this.selectedIndex = this.initIndex + this.viewable - 1;
                break;
                
            default:
                this.selectedIndex = 0;         //select the first index on the initial load
                return true;                    //this means that it is the initial load.  Ajax call is necessary
                break;
        }
        //alert(this.viewable);
        //alert(this.initIndex);
        //alert('selectedIndex = ' + this.selectedIndex);
        //this.selectedIndex = this.initIndex;    //sets the selected widget appropriately
//        alert(
//            "Ending Init Index: " + this.initIndex
//            + "\nviewable: " + this.viewable
//            + "\nselectedIndex: " + this.selectedIndex
//            + "\ntotalWidgets: " + this.totalWidgets
//            );
        
        //check to see if any of the next set of viewable widgets are null; if so the ajax call is needed
        //for(var i=this.initIndex; i<(this.initIndex + this.viewable); i++)
        for(var i=this.initIndex; i<(this.initIndex + this.viewable)&&i<this.totalWidgets; i++)
        {
            if(i <= this.totalWidgets)
                if(this.widgets[i] == null)
                    return true;        //at least one of the items is null; call ajax to upload the set
        }
        
        return false;   //no need to call ajax; all of the items are loaded
    } */
    
    //set the selected Index
    AppendSelectWidget(this);
    /* this.selectWidget = function(widgetId)
    {
        for(var i=0; i<this.widgets.length; i++)
            if(this.widgets[i].ID == widgetId)
            {
                //alert('.selectWidget:i=' + i);
                this.selectedIndex = i;
                this.selectedCategoryID = this.widgets[i].categoryID;
                return this.widgets[i];
            }
            
        this.selectedIndex = 0;
        this.selectedCategoryID = 0;
        return this.widgets[0];
    } */
    
    //set the Loading Information in
    this.setLoading = function(show)
    {
        //TODO Make a display item appear or disappear
//        var div = ($(this.divWidgetBarID) || this.element.children[1]);
//        var text = document.createTextNode("Loading...");

//        //this next step should be done with an image rather than a text node.s
//        (show) ? div.appendChild(text) : div.removeChild(div.firstChild);
    }

    //check to see if all widgets are loaded
    this.isLoadingComplete = function()
    {   
        //assume if the widget count is 0 then then they are not done loading
        if(this.widgets.length == 0)
        {
            return false;
        }
        //if the widget's image has loaded its source will be in the bar.images array
        for(var i=0; i<this.widgets.length; i++)
        {
            var widget = this.widgets[i];
            if(widget.viewable && !(this.images.indexOf(widget.src) >= 0))
                return false;
        }
        return true;
        
        
        //DEBUGGING
        //alert("viewable: " + widget.viewable + "\n" + "image exists: " + (this.images.indexOf(widget.src) >= 0));
        //alert(widget.src);
    }

    AppendSetViewable(this);
    //determine which widgets are viewable
    /* this.setViewable = function()
    {
        //set each widget's viewable property correctly
        for(var i=0; i<this.widgets.length; i++)
        {
            //if the widget's index is the same as the starting index or less than the span of the viewable (starting from initIndex)
            if(i >= this.initIndex && i < (this.initIndex + this.viewable))
                this.widgets[i].viewable = true;
            else
                this.widgets[i].viewable = false;
            
        }
    } */
    
    AppendDisplayWidgets(this);
    //display each widget
    /* this.displayWidgets = function(direction)
    {
        //set each widget's viewable property correctly
        this.setViewable();
        
        //var json = this.widgets.toJSON();
        
        //alert("display widgets fired");
        var div = ($(this.divWidgetBarID) || this.element.children[1]);

        // get the margin size
        this.widgetPadding = 18;  //TODO: For some reason this is coming across as undefined
        var margin = Math.floor( SafeInt(this.widgetPadding) / 2);

        // get the total buffer width/height - add one more to the viewable to get the last whitespace
        var totalBuffer = ((margin == 0) ? 5 : margin) * (this.viewable + 1);    

        //initialize variables
        var widgetWidth = 50;
        var widgetHeight = 50;
        var widgetTop = 0;
        var widgetLeft = 0;
        var horizontal = false;
        var vertical = false;
        var start = 0;
        var end = 0;

        //derive the local positional variables based upon display type
        switch(this.widgetBarTemplate)
        {
            case WidgetBarTemplate.horizontal: 
                // get the width of a widget
                widgetWidth = 119;  //TODO: PASS WIDGET SIZES TO FUNCTION

                // get the height of a widget
                widgetHeight = 81;  //TODO: PASS WIDGET SIZES TO FUNCTION
                
                // constant top
                widgetTop = 6;
                break;
                
            case WidgetBarTemplate.vertical:   
                // get the width of a widget
                widgetWidth = SafeInt(this.styleProperties.width) - (SafeInt(this.widgetPadding)) ;
                widgetWidth = 102;  //TODO: PASS WIDGET SIZES TO FUNCTION

                // get the height of a widget
                widgetHeight = 65;  //TODO: PASS WIDGET SIZES TO FUNCTION
                
                // constant left
                widgetLeft = 5;    //TODO: PASS WIDGET SIZES TO FUNCTION
                break;
            
            default:
              return alert("Display Widgets 1: Unsupported Widget Bar Type");
        } 

        // loop through all widgets that were created in memory
        for(var i=0; i<this.widgets.length; i++)
        {  
            //Set if the last viewable widget 
            var lastViewable = false;
        
            //show all of the widgets in the given set; hide all others
            if(
                (
                    (this.initIndex+this.viewable)>=this.totalWidgets
                    &&
                    (
                        (
                            i>=this.initIndex
                            &&
                            i<this.totalWidgets
                        )
                        ||
                        (
                            i>=0
                            &&
                            i<(this.initIndex+this.viewable)-this.totalWidgets
                        )
                    )
                )
                ||
                (
                    (this.initIndex+this.viewable)<this.totalWidgets
                    &&
                    i>=this.initIndex
                    &&
                    i<(this.initIndex+this.viewable)
                )
              )
            {
                var swap = (direction == WidgetBarDirection.up || direction == WidgetBarDirection.left);
                var pos = (false) ? ((this.initIndex+this.viewable-1)-i+this.initIndex) : (i);

                if(i<this.initIndex)
                    pos += this.totalWidgets;
                
                //set the top and left style of the widget
                switch(this.widgetBarTemplate)
                {
                    case WidgetBarTemplate.horizontal: 
                        horizontal = true;
                        widgetLeft = ((pos - this.initIndex) * (widgetWidth + margin)) + margin; 
                        start = (this.styleProperties.width * .9) - this.styleProperties.left;
                        end = (swap) ? (((this.viewable * (widgetWidth + margin)) + margin)-widgetWidth) - widgetLeft : widgetLeft;
                        //alert("Slide on: " + this.widgets[i].text + "\nBarTemplate: " + this.widgetBarTemplate + "\nwidgetLeft: " + widgetLeft + "\nend: " + end);
                        break;
                        
                    case WidgetBarTemplate.vertical:   
                        vertical = true;
                        widgetTop = ( (pos - this.initIndex) * (widgetHeight + margin)) + margin;
                        start = (this.styleProperties.height * .9) - this.styleProperties.top;
                        //end = widgetTop;
                        end = (swap) ? (((this.viewable * (widgetHeight + margin)) + margin)-widgetHeight) - widgetTop : widgetTop;
                        break;
                    
                    default:
                      return alert("Display Widgets 2: Unsupported Widget Bar Type");
                }          
                
                this.widgets[i].top = widgetTop;
                this.widgets[i].left = widgetLeft;
                this.widgets[i].height = widgetHeight;
                this.widgets[i].width = widgetWidth;
                
                // add widget window to the container
                if(this.widgets[i].container)    //** This added for testing, error was being caught
                    div.appendChild(this.widgets[i].container);
                
                //set local vars as needed for dynamic display
                var type = this.widgetBarTemplate;
                var widget = $(this.widgets[i].ID);
                var selectedID = this.widgets[this.selectedIndex].ID;
                var barWidth = this.styleProperties.width;

                new Effect.Tween(widget, start, end, {duration: (1.0)},
                    function(p){
                        if(this)
                        {
                            style = {
                                position: 'absolute',
                                visibility: (horizontal) ? ((p + widgetWidth < start) ? 'visible' : 'hidden') : ((p + widgetHeight < start) ? 'visible' : 'hidden'),
                                display: 'block',
                                width: widgetWidth,
                                height: widgetHeight,
                                top: (vertical) ? ((swap) ? (start - widgetHeight - 3 - p.toFixed(0)) : p.toFixed(0)) : widgetTop,
                                left: (horizontal) ? ((swap) ? (start - widgetWidth - 3 - p.toFixed(0)) : p.toFixed(0)) : widgetLeft
                                //left: (horizontal) ? ((swap) ? (p.toFixed(0)) : p.toFixed(0)) : widgetLeft
                            };
                
                            setElementStyle(this, style);
                            
                            //if(p == widgetLeft) __shiftDone(type, selectedID);
                            //if(p == ((horizontal) ? widgetLeft : widgetTop)) 
                            if(p == ((horizontal) ? ((swap) ? 521 : 265) : ((swap) ? 305 : 9))) 
                                __shiftDone(type, selectedID);
                        }
                    }
                );
                  
            }
            else if
            (
                (
                    $(this.widgets[i].ID)
                )
                &&
                (
                    (
                        this.initIndex-this.viewable<0
                        &&
                        (
                            (
                                i>=0
                                &&
                                i<this.initIndex
                            )
                            ||
                            (
                                i>=this.totalWidgets-(this.viewable-this.initIndex)
                                &&
                                i<this.totalWidgets
                            )
                        )
                    )
                    ||
                    (
                        this.initIndex-this.viewable>=0
                        &&
                        (
                            i<this.initIndex
                            ||
                            i>=this.initIndex+this.viewable
                        )
                    )
                )
            )
            {
                var swap2 = (direction == WidgetBarDirection.up || direction == WidgetBarDirection.left);
                var start2 = 0;
                var end2 = 0;
                //set the top and left style of the widget
                switch(this.widgetBarTemplate)
                {
                    case WidgetBarTemplate.horizontal: 
                        horizontal = true;
                        widgetLeft = this.widgets[i].left;
                        start2 = widgetLeft;
                        //end2 = (margin + widgetWidth)* -1;
                        end2 = (swap2) ? ((this.viewable * (widgetWidth + margin)) + margin) : (0-widgetWidth-margin);
                        break;
                        
                    case WidgetBarTemplate.vertical: 
                        vertical = true;
                        widgetTop = this.widgets[i].top;
                        start2 = widgetTop;
                        //end2 = (margin + widgetWidth)* -1;
                        end2 = (swap2) ? ((this.viewable * (widgetHeight + margin)) + margin) : (0-widgetHeight-margin);
                        break;
                    
                    default:
                      return alert("Display Widgets 2: Unsupported Widget Bar Type");
                }          
                
                this.widgets[i].top = widgetTop;
                this.widgets[i].left = widgetLeft;
                this.widgets[i].height = widgetHeight;
                this.widgets[i].width = widgetWidth;
                
                //create a default widget style
                var style2 = {
                    position: 'absolute',
                    visibility: 'hidden',
                    display: 'none',
                    width: widgetWidth,
                    height: widgetHeight,
                    top: widgetTop,
                    left: widgetLeft
                };
                
                var type2 = this.widgetBarTemplate;
                var widget2 = $(this.widgets[i].ID);
                
                //** slide widgets off
                if(widget2)
                {
                    new Effect.Tween(widget2, start2, end2, {duration: (1.0)},
                        function(p){
                            if(this)
                            {     
                                style2 = {
                                    position: 'absolute',
                                    //visibility: (horizontal) ? ((p < margin) ? 'hidden' : 'visible') : ((p < 0) ? 'hidden' : 'visible'),
                                    visibility: (horizontal) ? (swap2) ?((p < end2-widgetWidth) ? 'visible' : 'hidden') :((p < margin) ? 'hidden' : 'visible') : (swap2) ? ((p < end2-widgetHeight) ? 'visible' : 'hidden'):((p < 0) ? 'hidden' : 'visible'),
                                    display: 'block',
                                    width: widgetWidth,
                                    height: widgetHeight,
                                    //top: (vertical) ? ((swap2) ? (start - widgetHeight - 3 - p.toFixed(0)) : p.toFixed(0)) : widgetTop,
                                    top: (vertical) ? p.toFixed(0) : widgetTop,
//                                    TODO: shouldn't use start
                                    //left: (horizontal) ? ((swap2) ? (start - widgetWidth - 3 - p.toFixed(0)) : p.toFixed(0)) : widgetLeft
                                    left: (horizontal) ? p.toFixed(0) : widgetLeft
                                };
                    
                                setElementStyle(this, style2);                           
                            }
                        }
                    );
                }
            }
            else
            {
                var style = {
                    position: 'absolute',
                    visibility: 'hidden',
                    display: 'none'
                };
                this.widgets[i].display(style);
            }
        }
    } */
    
    AppendHighlight(this);
    //put a highlight effect on the selected widget.  Set all others to normal
    /* this.highlight = function(show)
    {    
        //var highlight = $(this.divHighlightID);
    	for(var i=0; i<this.widgets.length; i++)
        {
            var widget = $(this.widgets[i].ID);
            if(widget)
            {
	            if
	            (
	                i != this.selectedIndex
	                ||
	                i==this.selectedIndex && show==false
	            )
                        this.widgets[i].SetBackgroundImage(this.widgetProperties.backgroundImage); 
	            else
	            {	            
                    //if(highlight)
                        this.widgets[i].SetBackgroundImage(this.widgetProperties.backgroundImageSelect);
	                //else
	                    //alert("Highlight could not find the element: " + this.divHighlightID);
	            }
	        }
        }
    } */
}

function AppendSelectWidget(el)
{
            el.selectWidget = function(widgetId)
            {
                for(var i=0; i<this.widgets.length; i++)
                    if(el.widgets[i].ID == widgetId)
                    {
                        //alert('.selectWidget:i=' + i);
                        el.selectedIndex = i;
                        el.selectedCategoryID = el.widgets[i].categoryID;
                        return el.widgets[i];
                    }
            
                el.selectedIndex = 0;
                el.selectedCategoryID = 0;
                return el.widgets[0];
            }
}

function AppendHighlight(el)
{
            el.highlight = function(show)
            {    
                //var highlight = $(el.divHighlightID);
    	        for(var j=0; j<el.widgets.length; j++)
                {
                    var widget = $(el.widgets[j].ID);
                    if(widget)
                    {
                        if (!(el.widgets[j].SetBackgroundImage))
                        {
                            AppendSetBackgroundImage(el.widgets[j]);                       
                        }
                        
	                    if
	                    (
	                        j != el.selectedIndex
	                        ||
	                        j==el.selectedIndex && show==false
	                    )
                                el.widgets[j].SetBackgroundImage(el.widgetProperties.backgroundImage); 
	                    else
	                    {	            
                            //if(highlight)
                                el.widgets[j].SetBackgroundImage(el.widgetProperties.backgroundImageSelect);
	                        //else
	                            //alert("Highlight could not find the element: " + el.divHighlightID);
	                    }
	                }
                }
            }
}

function AppendLoadWidgets(el)
{
    el.loadWidgets = function(type, direction, selectFirst)
    {
        //** Loads the Widgets
        //** paramaters:
        //**            type        - 
        //**            direction   -
        //turn off the highlight div
        if (!(el.highlight))
        {
            AppendHighlight(el);
        }
        
        el.highlight(false);
        
        if (!(el.setParameters))
        {
            AppendSetParameters(el);
        }
        
        //only call ajax if one of the widgets is null
        if(!el.setParameters(direction))
        {
            var returnObj = new Object();
            return __onLoadComplete(returnObj, type, direction, selectFirst);
        }
        
        var customerKey = $("hdnCustomerKey").value;
        var params = 'customerKey='+customerKey+'&type='+type+'&parentCategoryID='+WidgetBars[WidgetBarTemplate.horizontal].selectedCategoryID+'&currentIndex='+el.initIndex+'&amountToLoad='+el.buffer;
        new Ajax.Request('Shopping.asmx/PopulateWidgets',
            {
                method:'post',
                parameters: params,
                onComplete: function(transport)
                {
                    if(transport.status == 200)
                    {
//                        alert('ajax sucesss!');
                        var returnObj = new Object();
                        var returnObj = ((transport.responseXML.text) ? transport.responseXML.text.evalJSON() : transport.responseXML.lastChild.textContent.evalJSON());
                        __onLoadComplete(returnObj, type, direction);
                    }
                    else
                    {
                         __logError('Load WidgetBar Complete Failed:'+ transport.status, '', '', _customerKey, personId, false);
                    }
                },
                onFailure: function(transport) { __logError('Load WidgetBar Ajax Failed:'+ transport.status, '', '', _customerKey, personId, false); }
             });
    }
}

function AppendSetParameters(el)
{
    el.setParameters = function(direction)
    {
        switch(direction)
        {
            case WidgetBarDirection.down:
            case WidgetBarDirection.right:
                //alert("right/down shift");
                if((el.initIndex + el.viewable) >= el.totalWidgets)
                    el.initIndex = el.initIndex + el.viewable - el.totalWidgets;
                else
                    el.initIndex = el.initIndex + el.viewable;
                    
                el.selectedIndex = el.initIndex;
                break;
                
            case WidgetBarDirection.up:
            case WidgetBarDirection.left:
                if((el.initIndex - el.viewable) < 0)
                    el.initIndex = el.totalWidgets - (el.viewable-el.initIndex);
                    //el.initIndex = el.initIndex + el.viewable - 1;//el.initIndex = el.initIndex - el.viewable + el.totalWidgets;
                else
                    el.initIndex = el.initIndex - el.viewable;
                    
                //** set the selected index
                if(el.initIndex + el.viewable>el.totalWidgets)
                    el.selectedIndex = (el.viewable-1)-(el.totalWidgets-el.initIndex);//el.selectedIndex = el.totalWidgets - el.viewable;
                else
                    el.selectedIndex = el.initIndex + el.viewable - 1;
                break;
                
            default:
                el.selectedIndex = 0;         //select the first index on the initial load
                return true;                    //el means that it is the initial load.  Ajax call is necessary
                break;
        }
        for(var i=el.initIndex; i<(el.initIndex + el.viewable)&&i<el.totalWidgets; i++)
        {
            if(i <= el.totalWidgets)
                if(el.widgets[i] == null)
                    return true;        //at least one of the items is null; call ajax to upload the set
        }
        
        return false;   //no need to call ajax; all of the items are loaded
    }
}

function AppendDisplayWidgets(el)
{
    //display each widget
    el.displayWidgets = function(direction,selectFirst)
    {
        if (!(el.setViewable))
        {
            AppendSetViewable(el);
        }
    
        //set each widget's viewable property correctly
        el.setViewable();
        
        //var json = el.widgets.toJSON();
        
        //alert("display widgets fired");
        var div = ($(el.divWidgetBarID) || el.element.children[1]);

        // get the margin size
        el.widgetPadding = 18;  //TODO: For some reason el is coming across as undefined
        var margin = Math.floor( SafeInt(el.widgetPadding) / 2);

        // get the total buffer width/height - add one more to the viewable to get the last whitespace
        var totalBuffer = ((margin == 0) ? 5 : margin) * (el.viewable + 1);    

        //initialize variables
        var widgetWidth = 50;
        var widgetHeight = 50;
        var widgetTop = 0;
        var widgetLeft = 0;
        var horizontal = false;
        var vertical = false;
        var start = 0;
        var end = 0;

        //derive the local positional variables based upon display type
        switch(el.widgetBarTemplate)
        {
            case WidgetBarTemplate.horizontal: 
                // get the width of a widget
                widgetWidth = 119;  //TODO: PASS WIDGET SIZES TO FUNCTION

                // get the height of a widget
                widgetHeight = 81;  //TODO: PASS WIDGET SIZES TO FUNCTION
                
                // constant top
                widgetTop = 6;
                break;
                
            case WidgetBarTemplate.vertical:   
                // get the width of a widget
                widgetWidth = SafeInt(el.styleProperties.width) - (SafeInt(el.widgetPadding)) ;
                widgetWidth = 102;  //TODO: PASS WIDGET SIZES TO FUNCTION

                // get the height of a widget
                widgetHeight = 65;  //TODO: PASS WIDGET SIZES TO FUNCTION
                
                // constant left
                widgetLeft = 5;    //TODO: PASS WIDGET SIZES TO FUNCTION
                break;
            
            default:
              return alert("Display Widgets 1: Unsupported Widget Bar Type");
        } 

        // loop through all widgets that were created in memory
        for(var i=0; i<el.widgets.length; i++)
        {  
            //Set if the last viewable widget 
            var lastViewable = false;
        
            //show all of the widgets in the given set; hide all others
            if(
                (
                    (el.initIndex+el.viewable)>=el.totalWidgets
                    &&
                    (
                        (
                            i>=el.initIndex
                            &&
                            i<el.totalWidgets
                        )
                        ||
                        (
                            i>=0
                            &&
                            i<(el.initIndex+el.viewable)-el.totalWidgets
                        )
                    )
                )
                ||
                (
                    (el.initIndex+el.viewable)<el.totalWidgets
                    &&
                    i>=el.initIndex
                    &&
                    i<(el.initIndex+el.viewable)
                )
              )
            {
                var swap = (direction == WidgetBarDirection.up || direction == WidgetBarDirection.left);
                var pos = (false) ? ((el.initIndex+el.viewable-1)-i+el.initIndex) : (i);

                if(i<el.initIndex)
                    pos += el.totalWidgets;
                
                //set the top and left style of the widget
                switch(el.widgetBarTemplate)
                {
                    case WidgetBarTemplate.horizontal: 
                        horizontal = true;
                        widgetLeft = ((pos - el.initIndex) * (widgetWidth + margin)) + margin; 
                        start = (el.styleProperties.width * .9) - el.styleProperties.left;
                        end = (swap) ? (((el.viewable * (widgetWidth + margin)) + margin)-widgetWidth) - widgetLeft : widgetLeft;
                        //alert("Slide on: " + el.widgets[i].text + "\nBarTemplate: " + el.widgetBarTemplate + "\nwidgetLeft: " + widgetLeft + "\nend: " + end);
                        break;
                        
                    case WidgetBarTemplate.vertical:   
                        vertical = true;
                        widgetTop = ( (pos - el.initIndex) * (widgetHeight + margin)) + margin;
                        start = (el.styleProperties.height * .9) - el.styleProperties.top;
                        //end = widgetTop;
                        end = (swap) ? (((el.viewable * (widgetHeight + margin)) + margin)-widgetHeight) - widgetTop : widgetTop;
                        break;
                    
                    default:
                      return alert("Display Widgets 2: Unsupported Widget Bar Type");
                }          
                
                el.widgets[i].top = widgetTop;
                el.widgets[i].left = widgetLeft;
                el.widgets[i].height = widgetHeight;
                el.widgets[i].width = widgetWidth;
                
                // add widget window to the container
                if(el.widgets[i].container)    //** el added for testing, error was being caught
                    div.appendChild(el.widgets[i].container);
                
                //set local vars as needed for dynamic display
                var type = el.widgetBarTemplate;
                var widget = $(el.widgets[i].ID);
                var selectedID = el.widgets[el.selectedIndex].ID;
                var barWidth = el.styleProperties.width;

                new Effect.Tween(widget, start, end, {duration: (1.0)},
                    function(p){
                        if(this)
                        {
                            style = {
                                position: 'absolute',
                                visibility: (horizontal) ? ((p + widgetWidth < start) ? 'visible' : 'hidden') : ((p + widgetHeight < start) ? 'visible' : 'hidden'),
                                display: 'block',
                                width: widgetWidth,
                                height: widgetHeight,
                                top: (vertical) ? ((swap) ? (start - widgetHeight - 3 - p.toFixed(0)) : p.toFixed(0)) : widgetTop,
                                left: (horizontal) ? ((swap) ? (start - widgetWidth - 3 - p.toFixed(0)) : p.toFixed(0)) : widgetLeft
                                //left: (horizontal) ? ((swap) ? (p.toFixed(0)) : p.toFixed(0)) : widgetLeft
                            };
                            
                            if (!(this.style))
                            {
                                    this.style = {
                                        position: ""
                                        ,visibility: ""
                                        ,display: ""
                                        ,width: ""
                                        ,top: ""
                                        ,left: ""
                                    };
                            }
                            setElementStyle(this, style);
                            
                            //if(p == widgetLeft) __shiftDone(type, swidgetectedID);
                            //if(p == ((horizontal) ? widgetLeft : widgetTop)) 
                            if(p == ((horizontal) ? ((swap) ? 521 : 265) : ((swap) ? 305 : 9))) 
                                __shiftDone(type, selectedID, selectFirst);
                        }
                    }
                );
                  
            }
            else if
            (
                (
                    $(el.widgets[i].ID)
                )
                &&
                (
                    (
                        el.initIndex-el.viewable<0
                        &&
                        (
                            (
                                i>=0
                                &&
                                i<el.initIndex
                            )
                            ||
                            (
                                i>=el.totalWidgets-(el.viewable-el.initIndex)
                                &&
                                i<el.totalWidgets
                            )
                        )
                    )
                    ||
                    (
                        el.initIndex-el.viewable>=0
                        &&
                        (
                            i<el.initIndex
                            ||
                            i>=el.initIndex+el.viewable
                        )
                    )
                )
            )
            {
                var swap2 = (direction == WidgetBarDirection.up || direction == WidgetBarDirection.left);
                var start2 = 0;
                var end2 = 0;
                //set the top and left style of the widget
                switch(el.widgetBarTemplate)
                {
                    case WidgetBarTemplate.horizontal: 
                        horizontal = true;
                        widgetLeft = el.widgets[i].left;
                        start2 = widgetLeft;
                        //end2 = (margin + widgetWidth)* -1;
                        end2 = (swap2) ? ((el.viewable * (widgetWidth + margin)) + margin) : (0-widgetWidth-margin);
                        break;
                        
                    case WidgetBarTemplate.vertical: 
                        vertical = true;
                        widgetTop = el.widgets[i].top;
                        start2 = widgetTop;
                        //end2 = (margin + widgetWidth)* -1;
                        end2 = (swap2) ? ((el.viewable * (widgetHeight + margin)) + margin) : (0-widgetHeight-margin);
                        break;
                    
                    default:
                      return alert("Display Widgets 2: Unsupported Widget Bar Type");
                }          
                
                el.widgets[i].top = widgetTop;
                el.widgets[i].left = widgetLeft;
                el.widgets[i].height = widgetHeight;
                el.widgets[i].width = widgetWidth;
                
                //create a default widget style
                var style2 = {
                    position: 'absolute',
                    visibility: 'hidden',
                    display: 'none',
                    width: widgetWidth,
                    height: widgetHeight,
                    top: widgetTop,
                    left: widgetLeft
                };
                
                var type2 = el.widgetBarTemplate;
                var widget2 = $(el.widgets[i].ID);
                
                //** slide widgets off
                if(widget2)
                {
                    new Effect.Tween(widget2, start2, end2, {duration: (1.0)},
                        function(p){
                            if(this)
                            {     
                                style2 = {
                                    position: 'absolute',
                                    //visibility: (horizontal) ? ((p < margin) ? 'hidden' : 'visible') : ((p < 0) ? 'hidden' : 'visible'),
                                    visibility: (horizontal) ? (swap2) ?((p < end2-widgetWidth) ? 'visible' : 'hidden') :((p < margin) ? 'hidden' : 'visible') : (swap2) ? ((p < end2-widgetHeight) ? 'visible' : 'hidden'):((p < 0) ? 'hidden' : 'visible'),
                                    display: 'block',
                                    width: widgetWidth,
                                    height: widgetHeight,
                                    //top: (vertical) ? ((swap2) ? (start - widgetHeight - 3 - p.toFixed(0)) : p.toFixed(0)) : widgetTop,
                                    top: (vertical) ? p.toFixed(0) : widgetTop,
//                                    TODO: shouldn't use start
                                    //left: (horizontal) ? ((swap2) ? (start - widgetWidth - 3 - p.toFixed(0)) : p.toFixed(0)) : widgetLeft
                                    left: (horizontal) ? p.toFixed(0) : widgetLeft
                                };
                                
                                if (!(this.style))
                                {
                                    this.style = {
                                        position: ""
                                        ,visibility: ""
                                        ,display: ""
                                        ,width: ""
                                        ,top: ""
                                        ,left: ""
                                    };
                                }
                                
                                setElementStyle(this, style2);                           
                            }
                        }
                    );
                }
            }
            else
            {
                var style = {
                    position: 'absolute',
                    visibility: 'hidden',
                    display: 'none'
                };
                if (!(el.widgets[i].display))
                {
                    AppendDisplay(el.widgets[i]);
                }
                
                el.widgets[i].display(style);
            }
        }
    }
}

function AppendSetViewable(el)
{
    el.setViewable = function()
    {
        //set each widget's viewable property correctly
        for(var i=0; i<el.widgets.length; i++)
        {
            //if the widget's index is the same as the starting index or less than the span of the viewable (starting from initIndex)
            if(i >= el.initIndex && i < (el.initIndex + el.viewable))
                el.widgets[i].viewable = true;
            else
                el.widgets[i].viewable = false;
            
        }
    }
}