var WidgetTemplate = {ImageWidget_1: 0, ImageWidget_2: 1};

/*=====================================================================================
    Widget Class
---------------------------------------------------------------------------------------*/
function Widget(id, index, text, src, alt, categoryID, parentCategoryID, parentCategoryName) 
{       
    // basic variables
    this.ID                 = (id || "");                   //this is the widget ID unique per widget
    this.index              = (index || null);              //this sets the index of the widget as contained within its parent's collection
    this.text               = (text || "");                 //this is the text to be displayed in the widget, below the image
    this.src                = (src || "");                  //this is the image source
    this.alt                = (alt || "");                  //this is the image alt text
    this.imageID            = "";                           //unique per image
    this.categoryID         = (categoryID || null)          //this is the category id from the database
    this.parentCategoryID   = (parentCategoryID || null)    //this is the parent category id from a selected parent widget
    this.parentCategoryName = (parentCategoryName || "")    //this is the parent category name from a selected parent widget
    
    this.backgroundImage            = '';                   // Background image for the widget
    this.backgroundImageRollover    = '';                   // Background image for the widget rollover
    this.backgroundImageSelect      = '';                   // Background image for the widget select
    this.imageHeight                = 0;                    // Height of the category image
    this.imageWidth                 = 0;                    // Width of the category image
    this.imageBackgroundColor       = 0;                    // Background color for the image 
    this.backgroundImgObj           = null                  // DOM object of the IMG object
        
    this.container          = null;                         //this will be the DOM object create to represent the class
    this.viewable           = false;                        //this flag will tell whether or not the current widget is viewable //set in bar class
    this.widgetTemplate     = WidgetTemplate.ImageWidget_1; //set by default    
    this.insideMargin       = null;    
    this.clickHandler       = null;                         //this will be the function used to listen for the click event.  It has to be passed because it depends on whether bar is vertical or horizontal
    
    this.top                = 0;
    this.left               = 0;
    this.height             = 0;
    this.width              = 0;

    this.properties = { styles: {} };    
    
    this.init = function(id, index, text, src, alt, categoryID, h, w, color, template, args, parentCategoryID, parentCategoryName)
    {
        this.ID                     = id;
        this.index                  = (index || null);      
        this.text                   = (text || "");
        this.src                    = (src || "");
        this.alt                    = (alt || "");
        this.categoryID             = (categoryID || null);
        this.parentCategoryID       = (parentCategoryID || null)    //this is the parent category id from a selected parent widget
        this.parentCategoryName     = (parentCategoryName || "")    //this is the parent category name from a selected parent widget        
        this.imageID                = "img_" + id;
        this.imageHeight            = h;
        this.imageWidth             = w;
        this.imageBackgroundColor   = color;
        this.template               = template;
        
        this.properties             = args;
        this.widgetTemplate         = args.widgetTemplate;
        this.backgroundImage        = args.backgroundImage;
        this.backgroundImageRollover  = args.backgroundImageRollover;
        this.backgroundImageSelect  = args.backgroundImageSelect;
        
        this.create();                                  //creates and stores the DOM object; however, it is not yet IN the DOM
          
        return this;
    }
    
    this.create = function()
    {
        //dont check if the widgets already exits, this is handled in the build function
        switch(this.widgetTemplate)
        {
            case WidgetTemplate.ImageWidget_1: 
                this.container = this.buildImageWidget_1();
                break;
                
            case WidgetTemplate.ImageWidget_2: 
                this.container = this.buildImageWidget_2();             //buildImageWidget_2() commented this out for now for simplicity; can add it in later without an issue
                break;
            
            default:
              return false;
        }
        return this.container;
    };
       
    this.buildImageWidget_1 = function()
    {
        //has to be a local var to be able to pass to event listener appropriately
        var widget = this;
        var id = this.ID;
        var img = this.backgroundImage;
        var img_sel = this.backgroundImageSelect;
        var img_roll = this.backgroundImageRollover;
        var wdg_img_id = this.ID + '_BorderImg';
        var doesExist = false;
        
        if($(this.ID))
            doesExist = true;
        
        //create a div container
        var newWidget = (doesExist) ? $(this.ID) : document.createElement("div");
        newWidget.id = this.ID;
        
        //determine what event listener to link to the widget.  HAS to be done in this class because of the need for the local var
        switch(this.template)
        {
            case WidgetBarTemplate.horizontal: 
                newWidget.onclick = function(){return __selectHorizontalWidget(id); };
                break;
                
            case WidgetBarTemplate.vertical:   
                newWidget.onclick = function(){return __selectVerticalWidget(id); };
                break;
            
            default:
              newWidget.onclick = function(){return alert("Unsupported Widget Bar Type"); };
        }
        
        newWidget.onmouseover =  function() {GenericMouseover(widget); };
        newWidget.onmouseout = function() { GenericMouseout(widget); };
        
        /* newWidget.onmouseover = function()
                                        {
                                            var wdg_img = $(id + '_BorderImg');
                                            var wdg_img_obj = $(wdg_img_id);
                                            var filter = (wdg_img_obj.style.filter) ? wdg_img_obj.style.filter : '';
                                            
                                            if(wdg_img && wdg_img_obj && wdg_img.src.indexOf(img_sel)<0 && filter.indexOf(img_sel)<=0)
                                                widget.SetBackgroundImage(img_roll);
                                        };*/
        /*newWidget.onmouseout = function(evt)
                                        {
                                            var wdg_img = $(id + '_BorderImg');
                                            var wdg_img_obj = $(wdg_img_id);
                                            var filter = (wdg_img_obj.style.filter) ? wdg_img_obj.style.filter : '';
                                            
                                            if(wdg_img && wdg_img_obj && wdg_img.src.indexOf(img_sel)<0 && filter.indexOf(img_sel)<=0)
                                               widget.SetBackgroundImage(img);
                                        };*/
        
        if(!doesExist)
        {
            //set this div to hidden by default
            /*var style = {
                position: 'absolute'
                ,visibility: 'hidden'
                ,display: 'none'
                ,height: '81px'
                ,margin: '2px 2px 2px 2px'
                ,cursor: 'hand'
                ,cursor: 'pointer'
                ,zIndex: 50
                ,fontFamily: 'Arial'
                ,fontSize: 10
                ,color: 'white'
                ,backgroundColor: this.imageBackgroundColor
            }
            setElementStyle(newWidget, style);*/
            newWidget.className = "cat_widget";
            
            var h = 20;
            var w = 20;
            //** These values are hard coded because they are not available in the DOM prior to being attached to the body
            var widgetH = 82-1;     //For some reason the bottom of the image was showing through by 1 px
            var widgetW = 119;
            //** Fitted values
            var fitW = SafeInt((this.imageWidth/this.imageHeight)*widgetH);
            var fitH = SafeInt((this.imageHeight/this.imageWidth)*widgetW);

            //** fit height
            if(
                (this.imageWidth<=this.imageHeight) //** fit height where the image height is greater than the width
                ||
                (this.imageWidth>this.imageHeight && fitH>=widgetH) //** or where the adjusted height is bigger than the widget height
            )
            {
                h = widgetH;
                w = (fitW == 0) ? widgetW : fitW;
            }
            //** fit width
            else
            {
                w = widgetW;
                h = (fitH == 0) ? widgetH : fitH;
            }
            
            //** this creates the product image
            var widgetImg = document.createElement("img");
            widgetImg.id = this.imageID;   
            widgetImg.src = this.src;
            widgetImg.alt = this.alt;
            /*style = {
                verticalAlign: 'middle'
                ,zIndex: 60
                ,height: h
                ,width: w
            }
            setElementStyle(widgetImg, style);*/
            widgetImg.className = 'cat_img';
            
            var lowerDiv = document.createElement("div");
            /*style = {
                zIndex: 70,
                position: 'absolute',
                left: 0,
                bottom: 0,
                width: '100%',
                color: '#FFFFFF',
                textAlign: 'center',
                padding: '0px 0px 5px 0px'
            }
            setElementStyle(lowerDiv, style);*/
            lowerDiv.className = 'cat_txt';
            var text = document.createTextNode(this.text);
            lowerDiv.appendChild(text);
             
            //** create the widget image border
            var widgetBorder = document.createElement("img");
            //widgetBorder.id = this.ID + '_BorderImg';
            widgetBorder.id = wdg_img_id;
            widgetBorder.alt = this.alt;
            //widgetBorder.src = this.backgroundImage;
            this.backgroundImageObj = widgetBorder;
            this.SetBackgroundImage(this.backgroundImage);
            /*style = {
                zIndex: 65,
                position: 'absolute',
                top: 0,
                left: 0,
                width: widgetW,
                height: widgetH
            }
            setElementStyle(widgetBorder, style);*/
            widgetBorder.className = 'cat_bg_img';
            
            newWidget.appendChild(widgetImg);
            newWidget.appendChild(lowerDiv);
            newWidget.appendChild(widgetBorder);
        }

        return newWidget;
    };      
    
    this.buildImageWidget_2 = function()
    {
        //has to be a local var to be able to pass to event listener appropriately
        var widget = this;
        var id = this.ID;
        
        //create a div container
        var newWidget = document.createElement("div");
        newWidget.id = this.ID;
        var img = this.backgroundImage;
        var img_sel = this.backgroundImageSelect;
        var img_roll = this.backgroundImageRollover;
        var wdg_img_id = this.ID + '_BorderImg';
        
        //determine what event listener to link to the widget.  HAS to be done in this class because of the need for the local var
        switch(this.template)
        {
            case WidgetBarTemplate.horizontal: 
                newWidget.onclick = function(){return __selectHorizontalWidget(id); };
                break;
                
            case WidgetBarTemplate.vertical:   
                newWidget.onclick = function(){return __selectVerticalWidget(id); };
                break;
            
            default:
              newWidget.onclick = function(){return alert("Unsupported Widget Bar Type"); };
        }
        
        newWidget.onmouseover =  function() {GenericMouseover(widget); };
        newWidget.onmouseout = function() { GenericMouseout(widget); };
        
        /*                         
        newWidget.onmouseover = function()
                                        {
                                            var wdg_img = $(id + '_BorderImg');
                                            var wdg_img_obj = $(wdg_img_id);
                                            var filter = (wdg_img_obj.style.filter) ? wdg_img_obj.style.filter : '';
                                            
                                            if(wdg_img && wdg_img_obj && wdg_img.src.indexOf(img_sel)<0 && filter.indexOf(img_sel)<=0)
                                                widget.SetBackgroundImage(img_roll);
                                        };
        newWidget.onmouseout = function(evt)
                                        {
                                            var wdg_img = $(id + '_BorderImg');
                                            var wdg_img_obj = $(wdg_img_id);
                                            var filter = (wdg_img_obj.style.filter) ? wdg_img_obj.style.filter : '';
                                            
                                            if(wdg_img && wdg_img_obj && wdg_img.src.indexOf(img_sel)<0 && filter.indexOf(img_sel)<=0)
                                               widget.SetBackgroundImage(img);
                                        };*/
        
        //set this div to hidden by default
        /*var style = {
            position: 'absolute'
            ,visibility: 'hidden'
            ,display: 'none'
            ,margin: '2px 2px 2px 2px'
            ,cursor: 'hand'
            ,cursor: 'pointer'
            ,zIndex: 50
            ,fontFamily: 'Arial'
            ,fontSize: 10
            ,color: 'white'
            ,backgroundColor: this.imageBackgroundColor
        }
        setElementStyle(newWidget, style);*/
        var style = {
            backgroundColor: this.imageBackgroundColor
        }
        setElementStyle(newWidget, style);
        newWidget.className = 'sub_cat_widget';
        
        var h = 20;
        var w = 20;
        //** These values are hard coded because they are not available in the DOM prior to being attached to the body
        var widgetH = 65;
        var widgetW = 102;
        //** Fitted values
        var fitW = SafeInt((this.imageWidth/this.imageHeight)*widgetH);
        var fitH = SafeInt((this.imageHeight/this.imageWidth)*widgetW);

        //** fit height
        if(
            (this.imageWidth<=this.imageHeight) //** fit height where the image height is greater than the width
            ||
            (this.imageWidth>this.imageHeight && fitH>=widgetH) //** or where the adjusted height is bigger than the widget height
        )
        {
            h = widgetH;
            w = (fitW == 0) ? widgetW : fitW;
        }
        //** fit width
        else
        {
            w = widgetW;
            h = (fitH == 0) ? widgetH : fitH;
        }
        
        var widgetImg = document.createElement("img");
        widgetImg.id = this.imageID;   
        widgetImg.src = this.src;
        widgetImg.alt = this.alt;
        /*style = {
            verticalAlign: 'middle'
            ,zIndex: 60
            ,height: h
            ,width: w
        }
        setElementStyle(widgetImg, style);*/
        style = {
            height: h
            ,width: w
        }
        setElementStyle(widgetImg, style);
        widgetImg.className = 'sub_cat_img';
        
        var lowerDiv = document.createElement("div");
        /*style = {
            zIndex: 70,
            position: 'absolute',
            left: 0,
            bottom: 0,
            width: '100%',
            color: '#FFFFFF',
            textAlign: 'center',
            padding: '0px 0px 5px 0px'
        }
        setElementStyle(lowerDiv, style);*/
        lowerDiv.className = 'sub_cat_txt';
        var text = document.createTextNode(this.text);
        lowerDiv.appendChild(text);
         
        //** build widget image border
        var widgetBorder = document.createElement("img");
        //widgetBorder.id = this.ID + '_BorderImg';
        widgetBorder.id = wdg_img_id;
        widgetBorder.alt = this.alt;
        widgetBorder.title = this.alt;
        //widgetBorder.src = this.backgroundImage;
        this.backgroundImageObj = widgetBorder;
        this.SetBackgroundImage(this.backgroundImage);
        /*style = {
            zIndex: 65,
            position: 'absolute',
            top: 0,
            left: 0,
            width: widgetW,
            height: widgetH
        }
        setElementStyle(widgetBorder, style);*/
        widgetBorder.className = 'sub_cat_bg_img'; 
        
        newWidget.appendChild(widgetImg);
        newWidget.appendChild(lowerDiv);
        newWidget.appendChild(widgetBorder);

        return newWidget;
    };   
    
    AppendDisplay(this);
    
    /* this.display = function(style)
    {
        //alert("Displaying Widget: "+this.ID);
        var widget = $(this.ID);
        if(widget != null)
        {
            if(this.viewable)                
                setElementStyle(widget, style);
            else
            {
                style.display = 'none';
                style.visibility = 'hidden';
                setElementStyle(widget, style);
                return false;
            }
        }
    }; */
    
    AppendSetBackgroundImage (this);
    
    /**************************************
    * This method commonizes settting the image for a widget
    * Paramaters:
    *           widgetImg = this is the actual IMG object for the widget border
    *           imgSrc = this is the string location to the image file
    * D.Lozano
    * 7/2/08
    **************************************/
    /* this.SetBackgroundImage = function(imgSrc)
    {
        //for(x in this) KEEP THIS!
            //alert(x + this[x]);
        var widgetImg = (this.backgroundImageObj || $(this.ID + '_BorderImg'));
        
        if(widgetImg && imgSrc)
        {
            if(Client.Engine.name=='ie'&&Client.Engine.version<7)
            {
                widgetImg.src = 'images/spacer.gif';
                widgetImg.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + imgSrc + "', sizingMethod='scale')";
            }
            else
                widgetImg.src = imgSrc;
        }
    }; */
}

function AppendSetBackgroundImage (el)
{

                            el.SetBackgroundImage = function(imgSrc)
                            {
                                //for(x in WidgetBars[WidgetBarTemplate.horizontal].widgets[i]) KEEP WidgetBars[WidgetBarTemplate.horizontal].widgets[i]!
                                    //alert(x + WidgetBars[WidgetBarTemplate.horizontal].widgets[i][x]);
                                var widgetImg = (el.backgroundImageObj || $(el.ID + '_BorderImg'));
                                
                                if(widgetImg && imgSrc)
                                {
                                    if(Client.Engine.name=='ie'&&Client.Engine.version<7)
                                    {
                                        widgetImg.src = 'images/spacer.gif';
                                        widgetImg.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + imgSrc + "', sizingMethod='scale')";
                                    }
                                    else
                                        widgetImg.src = imgSrc;
                                }
                            };
}

function GenericMouseover (widget)
{
    var id = widget.ID;
    var img = widget.backgroundImage;
    var img_sel = widget.backgroundImageSelect;
    var img_roll = widget.backgroundImageRollover;
    var wdg_img = $(id + '_BorderImg');
    var filter = (wdg_img.style.filter) ? wdg_img.style.filter : '';
                                            
    if(wdg_img && wdg_img.src.indexOf(img_sel)<0 && filter.indexOf(img_sel)<=0)
    {
        if (!(widget.SetBackgroundImage))
        {
            AppendSetBackgroundImage(widget);
        }
        
        widget.SetBackgroundImage(img_roll);
    }
}

function GenericMouseout (widget)
{
    var id = widget.ID;
    var img = widget.backgroundImage;
    var img_sel = widget.backgroundImageSelect;
    var img_roll = widget.backgroundImageRollover;    
    var wdg_img = $(id + '_BorderImg');
    var filter = (wdg_img.style.filter) ? wdg_img.style.filter : '';
                                            
    if(wdg_img && wdg_img.src.indexOf(img_sel)<0 && filter.indexOf(img_sel)<=0)
    {
        if (!(widget.SetBackgroundImage))
        {
            AppendSetBackgroundImage(widget);
        }
        
        widget.SetBackgroundImage(img);
    }
};

function AppendDisplay(el)
{
    el.display = function(style)
    {
        //alert("Displaying Widget: "+this.ID);
        var widget = $(el.ID);
        if(widget != null)
        {
            if(el.viewable)                
                setElementStyle(widget, style);
            else
            {
                style.display = 'none';
                style.visibility = 'hidden';
                setElementStyle(widget, style);
                return false;
            }
        }
    };
}