var _Interval = 5000;

function InitializeCategoryList()
{
    var categoryItem = getElementsByClassName(document, "categoryitem");
    var images;
    var imagecontainers;
    var imagePaths;
    var ids;
    var names;
    var links;
    
    for(var index = 0; index < categoryItem.length; index++)
    {
        images = getElementsByClassName(categoryItem[index], "image");
        imagecontainers = getElementsByClassName(categoryItem[index], "imagecontainer");
        imagePaths = getElementsByClassName(categoryItem[index], "imagelist");
        
        if(images.length > 0 && imagePaths.length > 0 && imagecontainers.length > 0)
        {
            images[0].id = "catimg_" + index;
            var objImg = new CategoryImage(images[0], imagePaths[0].value.split(","), imagecontainers[0]);
        }
        
        ids = getElementsByClassName(categoryItem[index], "idlist");
        names = getElementsByClassName(categoryItem[index], "namelist");
        links = getElementsByClassName(categoryItem[index], "showmenu");
        
        if(ids.length > 0 && names.length > 0 && links.length > 0)
        {
             var objMenu = new MenuList(categoryItem[index], ids[0].value.split(", "), names[0].value.split(", "), links);
        }
        
    }
}

function getElementsByClassName(placeHolder, cl)
 {
    var retnode = [];
    var myclass = new RegExp('\\b'+cl+'\\b');
    var elem = placeHolder.getElementsByTagName('*');
    for (var i = 0; i < elem.length; i++) {
    var classes = elem[i].className;
    if (myclass.test(classes)) retnode.push(elem[i]);
    }
    return retnode;
};

CategoryImage = function(image, imagePaths, imageContainer)
{
    this._objImage = image;
    this._ImagePaths = imagePaths;
    this._ImageIndex = 0;
    this._Ptr;
    this._imageContainer = imageContainer;
    
    this.StartSlideShow = function()
    {
        var _Self = this;
        _Ptr = setInterval(function(){_Self.ChangeImagePath();}, _Interval);
    };
    
    this.ChangeImagePath = function()
    {
        this._ImageIndex += 1;
        var _Self = this;
       
        if(this._ImageIndex >= this._ImagePaths.length)
        {
            this._ImageIndex = 0;
        }
        
       _Self.SetImagePath();
//       setTimeout(function(){_Self.fadin();},0);
//       setTimeout(function(){_Self.SetImagePath();},750);
//       setTimeout(function(){_Self.fadout();}, 1000);
    };
    
    this.SetImagePath = function()
    {
        this._objImage.src =this. _ImagePaths[this._ImageIndex].toLowerCase().replace("img.", "thumb.");
    }
    
    this.fadin = function()
    {
        this.opacity(100, 40, 21000);
    };
    
    this.fadout = function()
    {
        this.opacity(40, 100, 2000);
    };
    
    this.opacity = function(opacStart, opacEnd, millisec) {
    //speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;
    var _Self = this;
    
    //determine the direction for the blending, if start and end are the same nothing happens
        if(opacStart > opacEnd) 
        {
            for(i = opacStart; i >= opacEnd; i--) 
            {
                setTimeout(function(){_Self.changeOpac(i);},(timer * speed));
                timer++;
            }
        } 
        else if(opacStart < opacEnd) 
        {
            for(i = opacStart; i <= opacEnd; i++)
            {
                setTimeout(function(){_Self.changeOpac(i);},(timer * speed));
                timer++;
            }
        }
    };

    this.changeOpac = function (opacity) {
    var object = this._imageContainer.style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}

MenuList = function(menuHolder, menuIds, menuNames, objects)
{
    this._menuHolder = menuHolder;
    this._menuIds = menuIds;
    this._menuNames = menuNames;
    this._objects = objects;
    this._menu;
    
    if(this._menuIds.length > 0 && this._menuNames.length > 0 && objects != null && objects.length > 0)
    {
        if(this._menuIds.length == this._menuNames.length)
        {
            this._menu = document.createElement("UL");
            this._menu.className = "homepagepopupmenu";
            this._menu.style.display = "none";
            var _Self = this;
            
            for(var index = 0; index < this._menuIds.length; index++)
            {
                var menuItem = document.createElement("LI");
                var menuLink = document.createElement("A");
                
                if(this._menuIds[index].length > 0)
                {
                    menuItem.className = "fl";
                    menuLink.className = "menulinks";
                    menuLink.href = "products/" + this._menuNames[index].replace(" ", "_") + ".aspx";
                    menuLink.innerHTML = this._menuNames[index];
                    
                    menuItem.onmouseover = function(){this.style.backgroundColor = "#ffc15c";};
                    menuItem.onmouseout = function(){this.style.backgroundColor = "Transparent";};
            
                    menuItem.appendChild(menuLink);
                    this._menu.appendChild(menuItem);
                }
            }
            
            this._menuHolder.appendChild(this._menu);
            this._menu.onmouseover = function(){_Self.ShowMenu();};
            this._menu.onmouseout = function(){_Self.HideMenu();};
            
            for(var index = 0; index < this._objects.length; index++)
            {
                this._objects[index].style.cursor = "pointer";
                this._objects[index].onmouseover = function(){_Self.SetMenuPosition(this);};
                this._objects[index].onmouseout = function(){_Self.HideMenu();};
            }
        }
    };
    
    this.SetMenuPosition = function(object)
    {
        var location = Sys.UI.DomElement.getBounds(object);
        
        this._menu.style.top = location.y + location.height - 1 + "px";
        this._menu.style.left = location.x /*+ location.width - 5*/ + "px";
        this.ShowMenu();
    };
    
    this.ShowMenu = function()
    {
        if(this._menu.getElementsByTagName("LI").length > 0)
        {
            this._menu.style.display = "block";
        }
    };
    
    this.HideMenu = function()
    {
        this._menu.style.display = "none";
    };
    
 
}
    
}