// JavaScript Document
var ShowPic = new function()
{
	this.menuContainer = null;
	this.foodImg = [];
	this.bgOpacity=0;
	this.bgObj = null;
	this.barTime=null;
	this.bgTime = null;
	this.ajax = new Ajax();
	this.picFrame = null;
	this.blendedImg = null;
	this.closeBtn = null;
	this.blendedCloseBtn = null;
	this.Init = function()
	{
		var self = ShowPic;
		self.menuContainer = document.getElementById('MenuContainer');
		self.picFrame = document.getElementById('PicFrame');
		hiddenDivs = self.menuContainer.getElementsByTagName('input');
		self.bgObj = document.getElementById('DimmerBg');
		
		self.blendedImg = new BlendedObject('PicFrame');
		self.blendedImg.SetOpacityToZero();
		for(i=0; i<hiddenDivs.length; i++)
		{
			self.foodImg[i] = hiddenDivs[i].previousSibling;
			AddEventListener(self.foodImg[i], "click", self.DimmerBackground, false);
		} // end for
		self.closeBtn = document.getElementById('CloseBtn');
		AddEventListener(self.closeBtn, "click", self.CloseBtnClick, false);
		
		self.blendedCloseBtn = new BlendedObject('CloseBtn');
		self.blendedCloseBtn.SetOpacityToZero();
		window.onresize = self.GetCoordinate;
	} // end method
	
	this.CloseBtnClick = function()
	{
		var self = ShowPic;
		self.bgObj.style.visibility = 'hidden';
		self.SetBackgroundOpacityToZero(); 
		self.picFrame.style.visibility = 'hidden';
		self.blendedImg.SetOpacityToZero();
		self.closeBtn.style.visibility = 'hidden';
		self.blendedCloseBtn.SetOpacityToZero();
		//self.shownImgObj=null;
	} // end menthod
	
	this.PicAppears = function()
	{
		var self = ShowPic;
		
		
	} // end method
	
	this.DimmerBackground = function(event)
	{  
	    
		var self = ShowPic;
		eventTarget = GetEventTarget(event);
		hiddenDiv = eventTarget.nextSibling;
		subId = hiddenDiv.value;
		//picName = this.nextSibling.name;
		self.SetBackgroundOpacityToZero();
		self.bgObj.style.visibility = "visible";		
		self.bgTime = setInterval(function(){
		
		if(self.bgOpacity < 80)
		{
			self.bgOpacity = (self.bgOpacity) + 10;
			
		} // end if
		else
		{  
		    self.bgOpacity = 80;
			clearTimeout(self.bgTime);
			//self.BarAnimate();
			
			url = 'a_page.php?page=mpic&sub_id=' + subId;
			self.BarAnimate();
			self.ajax.doGet(url,self.DisplayPic);
			
		} // end else
		self.bgObj.style.KhtmlOpacity = (self.bgOpacity)/100;
		self.bgObj.style.MozOpacity = (self.bgOpacity)/100;
		self.bgObj.style.filter = "alpha(opacity=" + self.bgOpacity + ")";
		
		},1);
		
	} //end method
	
	this.SetBackgroundOpacityToZero = function()
	{
	 var self = ShowPic;	
	 self.bgOpacity = 0;
	 self.bgObj.style.KhtmlOpacity = 0;
	 self.bgObj.style.MozOpacity = 0;
	 self.bgObj.style.filter = "alpha(opacity=0)";	
	}
	
	this.DisplayPic = function()
	{
	var self = ShowPic;
	self.picFrame.innerHTML = self.ajax.req.responseText;
	self.blendedImg.BlendingIn();
	self.blendedCloseBtn.BlendingIn();
	self.GetCoordinate();
	self.StopAnimate();
	}// end method
	
	this.GetCoordinate = function()
	{
	var self = ShowPic;
	windowWidth = document.body.clientWidth;
    dimmerBgHeight = self.bgObj.offsetHeight;//self.bgObj.offsetHeight;
	
	self.picFrame.style.left = Number((windowWidth - 650)/2) + 'px';
	self.picFrame.style.top = Number((dimmerBgHeight-350)/2) + 'px';
	
	self.closeBtn.style.left = Number(((windowWidth - 650)/2)+650-30-3) + 'px';
	self.closeBtn.style.top = Number(((dimmerBgHeight-350)/2)+3) + 'px';
	
    } // end method
	
	this.BarAnimate = function()
	{
		
		var self = ShowPic;
		self.parentBar = document.getElementById('BigSquare');
		clearTimeout(self.barTime);
				
		self.parentBar.style.visibility = 'visible';
		while(self.parentBar.firstChild)
		    self.parentBar.removeChild(self.parentBar.firstChild);
		
		
		self.barTime=setInterval(function(){
	    totalChildren=self.parentBar.getElementsByTagName('div').length;	
		switch(totalChildren)
		{
			case 0: div = document.createElement("div");
			        div.id = 'SubSquare1';
					div.className = 'SubSquare';
					self.parentBar.appendChild(div);
					//alert(self.stopFlag);
					break;
			case 1: div = document.createElement("div");
			        div.id = 'SubSquare2';
					div.className = 'SubSquare';
					self.parentBar.appendChild(div);
					//alert(self.stopFlag);
					break;
			case 2: div = document.createElement('div')
			        div.id = 'SubSquare3';
					div.className = 'SubSquare';
					self.parentBar.appendChild(div);
					//alert(self.stopFlag);
					break;
			case 3: div = document.createElement('div')
			        div.id = 'SubSquare4';
					div.className = 'SubSquare';
					self.parentBar.appendChild(div);
					//alert(self.stopFlag);
					break;	
			case 4: while(self.parentBar.firstChild)
			         self.parentBar.removeChild(self.parentBar.firstChild);
					// alert(self.stopFlag);
					break;		
		} // end switch										  
										  },300);		
} // end method
	
	this.StopAnimate = function()
{
	 var self = ShowPic;
	 while(self.parentBar.firstChild)
	     self.parentBar.removeChild(self.parentBar.firstChild);
	 
	 self.parentBar.style.visibility = 'hidden';
	 self.bgOpacity = 0;
	 clearTimeout(self.barTime);	 	
}
} // end class