var mouseOver = false;

ImageList = function(GridTop, GridLeft, GridWidth, GridHeight, GridSpacing, Rows, Columns, GridCellHeight, 
	GridCellWidth, GridCellMouseOverWidth, GridCellMouseOverHeight, EnlargementStep, EnlargementTimeInterval, 
	ImageFolderPath, Position, Overflow, zIndex, MarginTop, MarginRight, MarginBottom, MarginLeft, 
	PaddingTop, PaddingLeft, TooltopBgColor, ShowToolTip)
{
	
	var arrImages = new Array();
    var arrEnlargedImages = new Array();
    var arrRefIds = new Array();
    var arrIds = new Array();
    var arrTooltips = new Array();
    var arrDescs = new Array();
    var arrHeights = new Array();
    
	
	var ActiveCellId;
	var divGrid;
	var divValues;
	
	
	setRolloverStyle(TooltopBgColor);
	
	
	this.Initialize=function(divGrid_id, divValues_id)
	{
	    //debugger;
		var intRow=0, intCol=0;
		divGrid = document.getElementById(divGrid_id);
		divValues = document.getElementById(divValues_id);
				
		divGrid.style.top = GridTop;
		divGrid.style.left = GridLeft;
		divGrid.style.height = GridHeight;
		divGrid.style.width = GridWidth;
		
		divGrid.style.position=Position;
		divGrid.style.overflow=Overflow;
		divGrid.style.zIndex=zIndex;

		divGrid.style.marginTop = MarginTop;
		divGrid.style.marginRight = MarginRight;
		divGrid.style.marginBottom = MarginBottom;
		divGrid.style.marginLeft = MarginLeft;
		arrImages = new Array();
		arrRefIds = new Array();
		arrIds = new Array();
		arrTooltips = new Array();
		arrDescs = new Array();

		var intLoop =0;
		var itemCount = 0;
		var displayCellCount = 0;
		
		itemCount = divValues.getElementsByTagName("div").length;
		
		for(intLoop=0; intLoop < itemCount; intLoop++)
		{
			arrImages[intLoop] = divValues.getElementsByTagName("div")[intLoop].getAttribute("src"); //divValues.childNodes[intLoop].getAttribute("Src");
			arrEnlargedImages[intLoop] = divValues.getElementsByTagName("div")[intLoop].getAttribute("enlargeView"); //divValues.childNodes[intLoop].getAttribute("enlargeView");
			arrRefIds[intLoop] = divValues.getElementsByTagName("div")[intLoop].getAttribute("RefId");//divValues.childNodes[intLoop].getAttribute("RefId");
			arrIds[intLoop] = divValues.getElementsByTagName("div")[intLoop].getAttribute("ProductId");//divValues.childNodes[intLoop].getAttribute("ProductId");
			
			if(divValues.getElementsByTagName("div")[intLoop].getAttribute("title") != null)
			{
			    arrTooltips[intLoop] = divValues.getElementsByTagName("div")[intLoop].getAttribute("title");
			}
			else
			{
			    arrTooltips[intLoop] = "";
			}
			
			if(divValues.getElementsByTagName("div")[intLoop].getAttribute("desc") != null)
			{
			    arrDescs[intLoop] = divValues.getElementsByTagName("div")[intLoop].getAttribute("desc");
			}
			else
			{
			    arrDescs[intLoop] = "";
			}
			
			if(divValues.getElementsByTagName("div")[intLoop].getAttribute("offheight") != null)
			{
			    arrHeights[intLoop] = divValues.getElementsByTagName("div")[intLoop].getAttribute("offheight");
			}
			else
			{
			    arrHeights[intLoop] = 0;
			}
		}
		
		var intCount = 0;
		    
		divGrid.innerHTML = "";
		
		if(itemCount < Columns)
		{
		    displayCellCount = itemCount;
		}
		else
		{
		    displayCellCount = Columns;
		}

		for(intRow=1; intRow<=Rows; intRow++)
		{
			for(intCol=1; intCol<=displayCellCount; intCol++)
			{
				var id = divGrid_id + "_Cell_" + intRow + "_" + intCol;
				var Top = (parseInt(PaddingTop) + parseInt(GridSpacing) + (parseInt(GridCellHeight) + parseInt(GridSpacing)) * (intRow-1)) + "px";
				var Left = (parseInt(PaddingLeft) + parseInt(GridSpacing) + (parseInt(GridCellWidth) + parseInt(GridSpacing)) * (intCol-1)) + "px";
				var divCell = new GridCell(id, Top, Left, GridCellHeight, GridCellWidth, GridCellMouseOver, GridCellMouseOut, "1px", "solid", "#C9C9C9", arrImages[intCount], arrRefIds[intCount], arrIds[intCount], intCount+1, arrTooltips[intCount], arrDescs[intCount], arrHeights[intCount], ShowToolTip, arrEnlargedImages[intCount]);
				divGrid.appendChild(divCell);
				
				intCount++
			}
		}
		var divToolTip = document.createElement("div");
		divToolTip.style.border = "1px solid #C9C9C9";
		divToolTip.style.padding = "10px";
		divToolTip.style.backgroundColor = "white";
		divToolTip.style.height = (parseInt(GridCellMouseOverHeight)-20) + "px";
		divToolTip.style.width = (parseInt(GridCellMouseOverWidth) * 1.5) + "px";	
		divToolTip.id="divToolTip";
		divToolTip.style.position = "absolute";
		divToolTip.style.zIndex = 500;
		divToolTip.style.display = "none";
		divGrid.appendChild(divToolTip);
	}
	
	function GridCellMouseOver(GridCell)
	{
		this.Parent = GridCell;
		
		Expand = function()
		{
			var isExpanding = this.Parent.getAttribute("isExpanding");

			if(isExpanding == "1")
			{
				if(parseInt(this.Parent.style.height) + (2 * EnlargementStep) <= parseInt(GridCellMouseOverHeight))
				{
					this.Parent.style.height = parseInt(this.Parent.style.height) + (2 * EnlargementStep) + "px";
					this.Parent.style.top = parseInt(this.Parent.style.top) - (1 * EnlargementStep) + "px";
					this.Parent.style.width = parseInt(this.Parent.style.width) + (2 * EnlargementStep) + "px";
					this.Parent.style.left = parseInt(this.Parent.style.left) - (1 * EnlargementStep) + "px";
//					this.Parent.style.borderTop = "2px solid #C9C9C9"; 
//					this.Parent.style.borderLeft = "2px solid #C9C9C9"; 
//					this.Parent.style.borderRight = "2px solid #C9C9C9"; 
//					this.Parent.style.borderBottom = "2px solid #C9C9C9";
					
					var divInner = this.Parent.getElementsByTagName("DIV")[0];
					divInner.style.top = (parseInt(divInner.style.top) + EnlargementStep) + "px";
					divInner.style.left = (parseInt(divInner.style.top) + EnlargementStep) + "px";
					divInner.getElementsByTagName("IMG")[0].style.display = "none";
					divInner.getElementsByTagName("IMG")[1].style.display = "";
					
					this.Parent.style.zIndex = 300;
					setTimeout("Expand()", EnlargementTimeInterval);
				}
			}	
		}
		
		if("true" == "<%=ShowToolTip.ToString.ToLower %>")
		{
			var divGrid = GridCell.parentNode;
			var divToolTip = divGrid.childNodes[divGrid.childNodes.length -1];
			divToolTip.innerHTML = "lorem ipsum dolor sit amet";
			
			divToolTip.style.top = (parseInt(GridCell.style.top) - parseInt((parseInt(GridCellMouseOverHeight) - parseInt(GridCellHeight))/2)) + "px";
			if(parseInt(GridCell.id.split("_")[2]) > 3)
			{
				divToolTip.style.left = (parseInt(GridCell.style.left) - (parseInt(GridCellMouseOverHeight) * 1.9)) + "px";
			}
			else
			{
				divToolTip.style.left = (parseInt(GridCell.style.left) + (parseInt(GridCellMouseOverHeight) * 1.1)) + "px";
			}
			divToolTip.style.display = "";
		}
		Restore = function()
		{
			this.ActiveCell.style.top = this.ActiveCell.getAttribute("top1");
			this.ActiveCell.style.left = this.ActiveCell.getAttribute("left1");
			this.ActiveCell.style.height = GridCellHeight;
			this.ActiveCell.style.width = GridCellWidth;
			this.ActiveCell.style.borderWidth = "1px"; 
			var divInner = this.ActiveCell.getElementsByTagName("DIV")[0];
			
			divInner.getElementsByTagName("IMG")[0].style.display = "";
		    divInner.getElementsByTagName("IMG")[1].style.display = "none";
					
			divInner.style.top = parseInt((parseInt(GridCellHeight) - parseInt(GridCellMouseOverHeight))/2) + "px";
			divInner.style.left = parseInt((parseInt(GridCellWidth) - parseInt(GridCellMouseOverWidth))/2) + "px";
			
			this.ActiveCell.style.zIndex = 200;
			//divToolTip.style.display = "none"
		}
		
		
		if(ActiveCellId != null)
		{
			this.ActiveCell = document.getElementById(ActiveCellId);
			ActiveCellId = null;
			this.ActiveCell.setAttribute("isExpanding", "0");
			Restore();
		}
		ActiveCellId = this.Parent.id;
		this.Parent.setAttribute("isExpanding", "1");
		this.Parent.style.zIndex = 300;
		Expand();
	}
		
	function GridCellMouseOut(GridCell)
	{
	    this.ActiveCell = GridCell;
		this.ActiveCell.setAttribute("isExpanding", "0");
		setTimeout("Restore();", EnlargementTimeInterval);
	}
	
	GridCell = function(id, Top, Left, Height, Width, onMouseOverHandler, onMouseOutHandler, BorderWidth, BorderStyle, BorderColor, ImageSrc, RefId, PId, Index, Tooltip, Desc, imgHeight, showTooltip, EnlargedImageSrc)
	{
		var div = document.createElement("DIV");
		var divInner = document.createElement("DIV");
		var img = document.createElement("IMG");
		var span = document.createElement("SPAN");
		var imgEnlargeView = document.createElement("IMG");
		var BlankImage = "";
		
		
		if(ImageSrc == null)
			ImageSrc = BlankImage;
		
		ImageSrc = Replace(ImageSrc, "%20"," ");
		ImageSrc = Replace(ImageSrc, " ","%2520");
		
		if(ImageFolderPath != "")
		{
		    img.src = ImageFolderPath + ImageSrc;
		    imgEnlargeView.src = ImageFolderPath + EnlargedImageSrc;
		}
		else
		{
		    img.src = ImageSrc;
		    imgEnlargeView.src = EnlargedImageSrc;
		}

		if(Tooltip != "")
		{
		   // divInner.title = img.src.replace("p_s", "p_s_l");
		  //  img.alt = Tooltip;
		}
		
		//img.title = ImageFolderPath + ImageSrc;
		divInner.style.top = parseInt((parseInt(Height) - parseInt(GridCellMouseOverHeight))/2) + "px";
		divInner.style.left = parseInt((parseInt(Width) - parseInt(GridCellMouseOverWidth))/2) + "px";
		divInner.style.height = parseInt(GridCellMouseOverHeight) + "px";
		divInner.style.width = parseInt(GridCellMouseOverWidth) + "px";
		divInner.style.textAlign = "center";
		divInner.style.position = "absolute";
		divInner.style.verticalAlign = "middle";
		divInner.className = "displayTableCell";
		divInner.zIndex = 250;
		
		div.className = "imglistitembg";

        span.className = "spanSpacer";
        span.innerHTML = "";
        
        if(imgHeight > 0 && imgHeight < parseInt(GridCellMouseOverHeight))
        {
            var spanHeight = parseInt(parseInt(GridCellMouseOverHeight)/2) - parseInt(imgHeight/2);
            img.style.paddingTop = spanHeight + "px";
            
            if(img.src == imgEnlargeView.src)
            {
                imgEnlargeView.style.paddingTop = spanHeight + "px";
            }
        }
        
        img.style.align= 'center';
        img.style.verticalAlign = 'middle';
        
        imgEnlargeView.style.align= 'center';
        imgEnlargeView.style.verticalAlign = 'middle';
		
		this.id=id;
		if(Top != null) this.Top = Top;
		if(Left != null) this.Left = Left;
		if(Height != null) this.Height = Height;
		if(Width != null) this.Width = Width;
		if(onMouseOverHandler != null) this.onMouseOverHandler = onMouseOverHandler;
		if(BorderWidth != null) this.BorderWidth = BorderWidth;
		if(BorderStyle != null) this.BorderStyle = BorderStyle;
		if(BorderColor != null) this.BorderColor = BorderColor;
		
		div.id = id;
		div.style.textAlign = "center";
		
		if(RefId == null)
			RefId = 0;
			
		div.setAttribute("PId", PId);
		div.setAttribute("RefId", RefId);
		div.setAttribute("Index", Index);
		div.setAttribute("Message", Tooltip);
		div.style.top = this.Top;
		div.setAttribute("top1", this.Top);
		div.style.left = this.Left;
		div.setAttribute("left1", this.Left);
		div.style.height = this.Height;
		div.style.width = this.Width;
		div.style.borderWidth = this.BorderWidth;
		div.style.borderStyle = this.BorderStyle;
		div.style.borderColor = this.BorderColor;
		div.style.cursor = "pointer";
		
		div.style.textAlign = "center";
		
		div.style.position = "absolute";
		div.style.zIndex = 210;
		div.style.overflow = "hidden";
		
		div.onmouseover = function(){
			if(onMouseOverHandler != null)
			{
				onMouseOverHandler(this);
			}
		}
		
		div.onmouseout = function(){
			if(onMouseOutHandler != null)
			{
				onMouseOutHandler(this);
			}
		}
		
		div.onclick = function()
		{
			document.getElementById(this.parentNode.getAttribute("SelectedIndex")).value = this.getAttribute("Index");
			document.getElementById(this.parentNode.getAttribute("SelectedRefId")).value = this.getAttribute("RefId");
			PostBack(this.getAttribute("RefId")); // + "_" + this.getAttribute("Index") + "_" + this.getAttribute("PId") + "_" + this.getAttribute("Message"));
		}

        div.appendChild(divInner);
        
        img.setAttribute("PTitle", Tooltip);
        img.setAttribute("PDesc", Desc);
        
        imgEnlargeView.setAttribute("PTitle", Tooltip);
        imgEnlargeView.setAttribute("PDesc", Desc);
        imgEnlargeView.style.display = "none";
        
		if (ImageSrc.length > 0)
		{
		    divInner.appendChild(img);
		    divInner.appendChild(imgEnlargeView);
		  
		   if(showTooltip != "False")
		   {
		        divInner.onmouseover = function(event){
			        mouseOver = true;
			        ImageRollOver(this.getElementsByTagName("IMG")[0], 'divRollOver', event);
		        }
    		    
		        divInner.onmousemove = function(event){
		            mouseOver = true;
			        ImageRollOver(this.getElementsByTagName("IMG")[0], 'divRollOver', event);
		        }
    		    
		        divInner.onmouseout = function(event){
		            mouseOver = false;
			        setTimeout("closeRollover('divRollOver');",20);
		        }
		   }
	    }

		return div;
	}
}

function setRolloverStyle(bgColor)
{
    var divRollover;
	var rollOverImages;
	var rollOverTds;
	var loopIndex = 0;
	
	divRollover = document.getElementById("divRollOver");
	
	if(divRollover != null)
	{
	    rollOverImages = divRollover.getElementsByTagName("img");
	
	    for(loopIndex = 0; loopIndex < rollOverImages.length; loopIndex++)
	    {
	        rollOverImages[loopIndex].src = rollOverImages[loopIndex].src.replace("_yellow", "_" + bgColor);
	    }
	    
	    rollOverTds = divRollover.getElementsByTagName("td");
	
	    for(loopIndex = 0; loopIndex < rollOverTds.length; loopIndex++)
	    {
	        if(rollOverTds[loopIndex].className != null)
	            rollOverTds[loopIndex].className = rollOverTds[loopIndex].className.replace("yellow", bgColor);
	    }
	}
	
}

function Replace(objString, oldChar, newChar)
{
    while(objString.indexOf(oldChar) > -1)
    {
        objString = objString.replace(oldChar, newChar);
    }
    
    return objString;
}

function PostBack(CommandArgument)
{
	 __doPostBack("lnkItemCommand", CommandArgument);
}




function ImageRollOver(object, objectId, e)
{
    if(document.getElementById(objectId) == null)
        return;
        
    var divRollOver = document.getElementById(objectId);
    var _xPos;
    var _yPos;
   
   divRollOver.getElementsByTagName("SPAN")[0].innerHTML = object.getAttribute("PTitle");
   
   if(divRollOver.getElementsByTagName("SPAN")[1] != null)
   {
        divRollOver.getElementsByTagName("SPAN")[1].innerHTML = object.getAttribute("PDesc");
   }
   
    if(document.all)
    {
        _xPos = event.x;
        _yPos = event.y;
    }
    else
    {
        _xPos = e.clientX;
        _yPos = e.clientY;
    }

    if(object.parentNode.style.top != "")
    {
         if(document.all)
        {
            _xPos += parseFloat(object.parentNode.parentNode.parentNode.offsetLeft, 10);
            _yPos += parseFloat(object.parentNode.parentNode.parentNode.offsetTop, 10);
        }
        else
        {
             _yPos = _yPos + getScrollTop();
        }
        
        //window.status = '_xPos: ' + _xPos + '; _yPos: ' + parseFloat(object.parentNode.parentNode.parentNode.offsetLeft, 10) + '; objectH: ' + (_xPos + parseFloat(document.getElementById("wrapper").offsetLeft, 10));
        
        _xPos += parseInt(object.parentNode.offsetLeft) + 40;
        _yPos += parseInt(object.parentNode.offsetTop) + 40;
    }
    else
    {
       _xPos += -45;
       _yPos += 50;
    }
    
    _xPos = (_xPos < 5)? 5: _xPos; // window left corner
    
    if(divRollOver.style.display != "")
    {
        divRollOver.style.display = "";
        divRollOver.style.visibility = "hidden";
    }
    
   
    
    _xPos = ((_xPos + parseInt(divRollOver.offsetWidth)) > parseInt(document.body.scrollWidth))? (parseInt(document.body.scrollWidth) - parseInt(divRollOver.offsetWidth)): _xPos; // window right corner 
    _yPos = (_yPos < 5)? 5: _yPos;
    
    divRollOver.style.visibility = "visible";
  
  
   divRollOver.style.top = _yPos + "px";
   divRollOver.style.left = _xPos + "px";
   
   if(divRollOver.style.display != "")
        divRollOver.style.display = "";
}

function closeRollover(objectId)
{
    if(document.getElementById(objectId) != null)
    {
        if(mouseOver == false)
	        document.getElementById(objectId).style.display = "none";
	}
}

function rollOut()
{
    mouseOver = false;
    setTimeout("closeRollover('divCatogaryRollover');",20);
}

function roll_over(img_name, img_src)
{
    if(document.getElementById(img_name) != null)
        document.getElementById(img_name).src = img_src;
}

function getScrollTop()
{
    var sTop = 0;
    
    if(parseInt(document.body.scrollTop) > 0)
    {
        sTop = parseInt(document.body.scrollTop);
    }
    else if(parseInt(document.documentElement.scrollTop) > 0)
    {
        sTop = parseInt(document.documentElement.scrollTop);
    }
    
    return sTop;
}
function fixPNG() 
{
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters)) 
{
   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText 
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
         img.outerHTML = strNewHTML
         i = i-1
        
      }
   }
}
}