//This method allows us to attach a window on load event to the current window so .NET can fire this method on Page_Load
function AttachEvent(elementObj, eventName, eventHandlerFunctionName)
{
    if (elementObj.addEventListener) // Non-IE browsers
    { 
        elementObj.addEventListener(eventName, eventHandlerFunctionName, false);		
    } 
    else if (elementObj.attachEvent) // IE 6+
    { 
        elementObj.attachEvent('on' + eventName, eventHandlerFunctionName);
    } 
    else 
    { 
        var currentEventHandler = elementObj['on' + eventName];// Older browsers 
        if (currentEventHandler == null) 
        {
            elementObj['on' + eventName] = eventHandlerFunctionName;
        } 
        else 
        {
            elementObj['on' + eventName] = function(e) { currentEventHandler(e); eventHandlerFunctionName(e); }
        }
    }
}
var tl=tm=tr=bls=bms=brs=bl=bm=br=tls=tms=trs='';
var elOpenNow=null;
var pList;
var catLinks = new Array(8);
catLinks[11]="http://www.annegeddes.com/shop/Baby-Bee-Collection-C33.aspx";
catLinks[12]="http://www.annegeddes.com/shop/Baby-Bear-Collection-C35.aspx";
catLinks[13]="http://www.annegeddes.com/shop/Ladybug-Collection-C32.aspx";
catLinks[21]="http://www.annegeddes.com/shop/Fairy-Collection-C34.aspx";
catLinks[22]="http://www.annegeddes.com/shop/Baby-Bunny-Collection-C36.aspx";
catLinks[23]="http://www.annegeddes.com/shop/Waterlily-C103.aspx";
catLinks[27]="http://www.annegeddes.com/shop/pure-Collection-C112.aspx";
catLinks[29]="http://www.annegeddes.com/shop/Tiger-Collection-C113.aspx";

function Init()
{
    //set up each image to have an onclick / mouseover
    tl = document.getElementById('11'); tl.categoryId=33; //this is the id of the category this div represents.
    tm = document.getElementById('12'); tm.categoryId=36; //Use it to extract products from the pList
    tr = document.getElementById('13'); tr.categoryId=32;
    bls = document.getElementById('24');
    bms = document.getElementById('25');
    brs = document.getElementById('26');
    
    pr = document.getElementById('27'); pr.categoryId=112;
    prs = document.getElementById('28');
    
    tigerr = document.getElementById('29'); tigerr.categoryId=113;
    tigers = document.getElementById('30');
    
    bl = document.getElementById('21'); bl.categoryId=34;
    bm = document.getElementById('22'); bm.categoryId=36;
    br = document.getElementById('23'); br.categoryId=103;
    tls = document.getElementById('14');
    tms = document.getElementById('15');
    trs = document.getElementById('16');
    
    var divDescArray = new Array(bls,bms,brs,prs,tigers,tls,tms,trs);
    var divIconArray0 = new Array(pr,tigerr);
    var divIconArray1 = new Array(tl,tm,tr);
    var divIconArray2 = new Array(bl,bm,br);
    var divIconArrays = new Array(divIconArray0, divIconArray1, divIconArray2);
    
    GenerateProductsRow(bls,tl);
    GenerateProductsRow(bms,tm);
    GenerateProductsRow(brs,tr);
    
    GenerateProductsRow(tls,bl);
    GenerateProductsRow(tms,bm);
    GenerateProductsRow(trs,br);
    
    GenerateProductsRow(prs, pr);
    GenerateProductsRow(tigers, tigerr);
    
    tl.onclick = function()
    {
        AttachOnClickEvent(tl,bls,divIconArrays,divIconArray2,divDescArray);
    }
    
    tm.onclick = function()
    {
        AttachOnClickEvent(tm,bms,divIconArrays,divIconArray2,divDescArray);
    }
    
    tr.onclick = function()
    {
        AttachOnClickEvent(tr,brs,divIconArrays,divIconArray2,divDescArray);
    }
    
    bl.onclick = function()
    {
        AttachOnClickEvent(bl,tls,divIconArrays,divIconArray1,divDescArray);
    }
    
    bm.onclick = function()
    {
        AttachOnClickEvent(bm,tms,divIconArrays,divIconArray1,divDescArray);
    }
    
    br.onclick = function()
    {
        AttachOnClickEvent(br,trs,divIconArrays,divIconArray1,divDescArray);
    }
    
    pr.onclick = function()
    {
        AttachOnClickEvent(pr,prs,divIconArrays,divIconArray1,divDescArray);
    }
    tigerr.onclick = function()
    {
        AttachOnClickEvent(tigerr,tigers,divIconArrays,divIconArray1,divDescArray);
    }
    
}

function GenerateProductsRow(targetDiv, el)
{
    var tbody = document.getElementById(targetDiv.id + '_tbody');
    var tr = document.createElement('tr');
    var td = document.createElement('td'); //attach images to this row
    td.vAlign = 'top';
    td.style.paddingLeft = '30px';
    td.style.paddingRight = '10px';
    var tbl = document.createElement('table');
    var tbo = document.createElement('tbody');
    tbl.appendChild(tbo);
    var tr1 = document.createElement('tr');
    tbo.appendChild(tr1);
    for(var i=0;i<pList.length;i++)
    {
        if(pList[i].CatId==el.categoryId)
        {
            //we want this
            var td1 = document.createElement('td');
            td1.style.width = '121px';
            td1.style.height = '107px'
            td1.style.paddingRight = '17px';
            
            var a = document.createElement('a');
            a.href = pList[i].OnClickUrl;
            
            var img = document.createElement('img');
            img.src = 'http://www.annegeddes.com/shop/' + pList[i].ImgUrl;
            img.width = '121';
            img.height='107';
            img.alt = pList[i].Name;
            img.title = pList[i].Name;
            img.style.border = 'solid 1px #D5CABE';
            a.appendChild(img);
            td1.appendChild(a);
            tr1.appendChild(td1);
        }
    }
    td.appendChild(tbl);
    tr.appendChild(td);
    tbody.appendChild(tr);
}
    
function AttachOnClickEvent(el, show1, divIconArrays, hideIconArray, divDescArray)
{
        if(elOpenNow!=null)
        {
            if(elOpenNow.id==el.id)
            {
                //response redirect to category page
                var a = document.getElementById(el.id+'_a');
                a.href =catLinks[el.id];
            }
            else //remove the shop now image from whatever has it right now
            {
                var openImage = document.getElementById('img_' + elOpenNow.id);
                openImage.src=openImage.src.replace('-on.jpg','.jpg'); //change this image
                ShowOtherElement(el, show1, divIconArrays, hideIconArray, divDescArray);
            }
        }
        else
        {
            ShowOtherElement(el, show1, divIconArrays, hideIconArray, divDescArray);
        }
}

function ShowOtherElement(el, show1, divIconArrays, hideIconArray, divDescArray)
{
		//make all icon visible
//		for ( var j in divIconArrays)
//		{
//			for( var k in j){
//				k.style.display = 'block';
//			}
//		} 
		
		for ( j=0; j<divIconArrays.length; j++ )
		{
			for ( k=0; k<divIconArrays[j].length; k++ )
			{
				divIconArrays[j][k].style.display = 'block';
			}
		}

		//hide the icon in the same row
		for (l=0; l<hideIconArray.length; l++)
		{
				hideIconArray[l].style.display = 'none';
		} 
		
		//hide all descriptions		
		for (i=0; i<divDescArray.length; i++)
		{
				divDescArray[i].style.display = 'none';
		} 
		//show the current description
		show1.style.display = 'block';
		
    //change image and do something else onclick now
    var img = document.getElementById('img_' + el.id);
    img.src=img.src.replace('.jpg','-on.jpg'); //change this image
    elOpenNow = el;
}

function Clear()
{
    tl.style.display = 'block';
    tm.style.display = 'block';
    tr.style.display = 'block';
    
    bl.style.display = 'block';
    bm.style.display = 'block';
    br.style.display = 'block';
    
    tls.style.display = 'none';
    tms.style.display = 'none';
    trs.style.display = 'none';
    
    bls.style.display = 'none';
    bms.style.display = 'none';
    brs.style.display = 'none';
    
    pr.style.display = 'block';
    prs.style.display = 'none';
    
    tigerr.style.display = 'block';
    tigers.style.display = 'none';
    
    //hide the elOpenNow
    if(elOpenNow!=null)
    {
        var openImage = document.getElementById('img_' + elOpenNow.id);
        openImage.src=openImage.src.replace('-on.jpg','.jpg'); //change this image
    }
}