var popup = new ModalPopWindow();
    
function addEvent(obj, type, fn) 
{
	if (obj.addEventListener) 
	{
		obj.addEventListener(type, fn, false);
	}
	else if (obj.attachEvent) 
	{
		obj["e"+type+fn] = fn;
		obj[type+fn] = function() 
		{
		    obj["e"+type+fn](window.event); 
		}
		obj.attachEvent("on"+type, obj[type+fn]);
	}
	else 
	{
		obj["on"+type] = obj["e"+type+fn];
	}
}

function ModalPopWindow() 
{
    this.isPopupActive = false;
    this.modal = null;
    this.bgDiv = null;
    this.babyList = null;
    this.title = '';
    this.ShowPopUp = function()
    {
        this.bgDiv = document.createElement('div');
        this.bgDiv.className = 'coverBg';
        
        //calculate width and height of this.bgDiv without adding any
        if(document.body && (document.body.scrollWidth || document.body.scrollHeight))
        {
            var pageWidth = document.body.scrollWidth + 'px';
            var pageHeight = document.body.scrollHeight + 10 + 'px';
        }
        else if(document.body.offsetWidth)
        {
            var pageWidth = document.body.offsetWidth + 'px';
            var pageHeight = document.body.offsetHeight + 10 + 'px';
        }
        else 
        {
            var pageWidth='100%';
            var pageHeight='100%';
        }
        this.bgDiv.style.width = pageWidth;
        this.bgDiv.style.height = pageHeight;

        this.modal = document.createElement('div');
        this.modal.className = "modalPopup";
        this.modal.Code = this;
        
        document.body.appendChild(this.bgDiv);
        document.body.appendChild(this.modal);
        
        var tbl = document.createElement('table');
        tbl.style.width = '100%';
        tbl.cellSpacing = '0';
        tbl.cellPadding = '0';
        
        var tbody =document.createElement('tbody');
        var tr = document.createElement('tr');
        
        var td1 = document.createElement('td');
        td1.style.width = '90%';
        td1.style.align = 'center';
        td1.style.valign = 'top';
        td1.className = 'modalHeader';
        var p = document.createElement('p');
        p.innerHTML = this.title;
        td1.appendChild(p);
        tr.appendChild(td1);
        
        var td2 = document.createElement('td');
        td2.parent = this.modal;
        td2.bg = this.bgDiv;
        td2.style.width = '5%';
        td2.innerHTML = '&nbsp';
        td2.className = 'modalClose';
        td2.onclick = function()
        {
          if (this.parent != null) 
          {
              document.body.removeChild(this.parent);
              this.parent = null;
          }
          if (this.bg != null) 
          {
              document.body.removeChild(this.bg);
              this.bg = null;
          }
        }
        tr.appendChild(td2);
        tbody.appendChild(tr);
        tbl.appendChild(tbody);
        
        this.modal.appendChild(tbl);
        
        addEvent(this.modal, 'keypress',function(e)
        {
            if(e.keyCode==27) //esc was pressed
            {
                this.Code.HidePopUp();
            }
        });
        
        try
        {
            this.modal.focus();
        }
        catch(ex)
        {
            //cant focus :(
        }
        
        //babyList contains images, msg and thumbnails for the slide show - generate a ui / li combo for the slideshow to read from
        this.ul = document.createElement('ul');
        this.ul.id = 'slideshow';
        
        for(var i=0;i<this.babyList.length;i++)
        {
            var li = document.createElement('li');
            
            widths[this.babyList[i].ImgUrl] = this.babyList[i].ImgWidth;
            heights[this.babyList[i].ImgUrl] = this.babyList[i].ImgHeight;
            
            var h3 = document.createElement('h3');
            h3.innerHTML = ''; //we don;t want any title
//            h3.innerHTML =this.babyList[i].ImgWidth + ',' + this.babyList[i].ImgHeight;
            li.appendChild(h3);
            
            var span = document.createElement('span');
            span.innerHTML = this.babyList[i].ImgUrl;
            li.appendChild(span);
            
            var p = document.createElement('p');
            p.innerHTML = this.babyList[i].ImgCaption;
            li.appendChild(p);
            
            var a = document.createElement('a');
            a.href = '#';
            
            var img = document.createElement('img');
            img.src = this.babyList[i].ImgUrl;
            img.style.width = this.babyList[i].TmbWidth + 'px';
            img.style.height = this.babyList[i].TmbHeight + 'px';
            img.alt = this.babyList[i].ImgAltText;
            a.appendChild(img);
            
            li.appendChild(a);
            
            this.ul.appendChild(li);
        }
        
        this.modal.appendChild(this.ul);
        
        this.wrapper = document.createElement('div');
        this.wrapper.id = 'wrapper';
        
        this.fullsize = document.createElement('div');
        this.fullsize.id = 'fullsize';
        
        this.imgPrev = document.createElement('div');
        this.imgPrev.id = 'imgprev';
        this.imgPrev.className = 'sliderImgnav';
        this.imgPrev.title = 'Previous Image';
        this.fullsize.appendChild(this.imgPrev);
        
        this.imgLink= document.createElement('div');
        this.imgLink.id = 'imglink';
        this.fullsize.appendChild(this.imgLink);
        
        this.imgNext = document.createElement('div');
        this.imgNext.id = 'imgnext';
        this.imgNext.className = 'sliderImgnav';
        this.imgNext.title = 'Next Image';
        this.fullsize.appendChild(this.imgNext);
        
        this.imaget = document.createElement('div');
        this.imaget.id = 'image';
        this.fullsize.appendChild(this.imaget);
				
				this.informationWrap = document.createElement('div');
        this.informationWrap.id = 'informationWrap';

            
        this.information = document.createElement('div');
        this.information.id = 'information';
        
        this.infH3 = document.createElement('h3');
        this.information.appendChild(this.infH3);
        
        this.infP = document.createElement('p');
        this.information.appendChild(this.infP);
        
        this.informationWrap.appendChild(this.information);
        
        this.fullsize.appendChild(this.informationWrap);
        this.wrapper.appendChild(this.fullsize);
        
        this.modal.appendChild(this.wrapper);
        
        this.thumbnails = document.createElement('div');
        this.thumbnails.id = 'thumbnails';
        
        this.slideleft = document.createElement('div');
        this.slideleft.id = 'slideleft';
        this.slideleft.title = 'Slide Left';
        this.thumbnails.appendChild(this.slideleft);
        
        this.slidearea = document.createElement('div');
        this.slidearea.id = 'slidearea';
        
        this.slider = document.createElement('div');
        this.slider.id = 'slider';
        
        this.slidearea.appendChild(this.slider);
        this.thumbnails.appendChild(this.slidearea);
        
        this.slideright = document.createElement('div');
        this.slideright.id = 'slideright';
        this.slideright.title = 'Slide Right';
        this.thumbnails.appendChild(this.slideright);
        
        this.wrapper.appendChild(this.thumbnails);
        
        {
            //do the slideshow
	        this.ul.style.display='none';
	        this.wrapper.style.display='block';
	        slideshow=new TINY.slideshow("slideshow");
		    slideshow.auto=true;
		    slideshow.speed=5;
		    slideshow.link="linkhover";
		    slideshow.info="information";
		    slideshow.thumbs="slider";
		    slideshow.left="slideleft";
		    slideshow.right="slideright";
		    slideshow.scrollSpeed=10;
		    slideshow.spacing=5;
		    slideshow.active="#fff";
		    slideshow.init("slideshow","image","imgprev","imgnext","imglink");
        }
        
        this.modal.appendChild(this.wrapper);
    }
    
    this.HidePopUp = function()
    {
        if (this.modal != null) 
        {
            document.body.removeChild(this.modal);
            this.modal = null;
        }
        if (this.bgDiv != null) 
        {
            document.body.removeChild(this.bgDiv);
            this.bgDiv = null;
        }
    }
}