/* Made by Ben, www.ai-development.com, 2007, part of code taken from litebox class */
/* 
	<script src="bloom.js" type="text/javascript"></script>
	<link href='CSSGallery.css' rel='stylesheet' type='text/css' />
	<a href="gallery/pic/pic1.jpg" rel="solo !or! row.rowName"><img src="gallery/thumbs/pic1.jpg" name="first Try, appear at the top" alt="this is a description, appear at the bottom" /></a>
*/
/*
if (window.addEventListener) {		// W3C
	window.addEventListener("load",initGallery,false);
} else if (window.attachEvent) {	// Explorer
	window.attachEvent("onload",initGallery);
} else {							// Old skool
	window.onload = function(){initGallery();}
}*/

window.onunload = function(){gallery = null;}

function initGallery(){myGallery = new Gallery();}

function Gallery()
{
	/*--- Config ---*/
	this.folder = 'gallery/pic/'; //folder of your large pictures
	this.bloomTime = 0;//interval to check picture loading
	
	this.imagePrev = new Image();
	this.image = new Image();//image holder
	this.image.onload = function(){myGallery.bloomTime = setInterval("myGallery.charge()",100);}
	this.imageNext = new Image();
	this.isPartSet = true;
	this.imgName;
	this.imgNum;//Number of the current image
	
	this.links = new Array(); //all anchor in the document.
	this.linkRow = new Array();// all the img of a set
	this.bloomLinks = new Array();//all the link with a bloom related rel attribute
	this.setArray;
	
	this.arrElements; //Array  of the pictures in the div container
	this.intElements; //nb Pictures in container;
	this.description;
	this.bloomOp = new opacity();//opacity manager object
	
	//ie detection from litebox
	/*@cc_on
		/*@if (@_jscript)
			this.ie = (document.all && !window.opera) ? true : false;
		/*@else @*/
			this.ie = false;
		/*@end
	@*/
	this.ie7 = (this.ie && window.XMLHttpRequest);
	//add gallery divs at the end of the body
	this.setUp();
}

Gallery.prototype.setUp = function()
{
	this.populate();

	var objBody = document.getElementsByTagName("body").item(0);
	
	var objOverlay = document.createElement("div");
		objOverlay.setAttribute('id','bg');
		if ((this.ie && !this.ie7) || (this.ie7 && document.compatMode == 'BackCompat')) 
		{
			objOverlay.style.position = 'absolute';
		}
		else objOverlay.style.position = 'fixed';
		objOverlay.style.display = 'none';
		if(this.ie) objOverlay.style.filter = 'alpha(opacity=50)';
		else objOverlay.style.opacity = '0.5';
		objOverlay.onclick = function(){myGallery.fetch()};
		objBody.appendChild(objOverlay);
	
	var objBloom = document.createElement("div");
		objBloom.setAttribute('id','bloom');
		objBloom.style.display = 'none';
		objBody.appendChild(objBloom);
	
	var objTitle = document.createElement("div");
		objTitle.setAttribute('id','title');
		objTitle.onclick = function(){myGallery.fetch()};
		objBloom.appendChild(objTitle);
	
	var objCloseImg = document.createElement("img");
		objCloseImg.setAttribute('src', 'gallery/close.jpg');
		objTitle.appendChild(objCloseImg);
	
	var objImgName = document.createElement("span");
		objImgName.setAttribute('id', 'imgName');
		objTitle.appendChild(objImgName);
	
	var objImgHolder = document.createElement("div");
		objImgHolder.setAttribute('id','imgHolder');
		objBloom.appendChild(objImgHolder);
	
	var objFrame = document.createElement("iframe");
		objFrame.setAttribute('id','frame');
		objFrame.style.display = 'none';
		if(this.ie) objFrame.style.filter = 'alpha(opacity=0)';
		else objFrame.style.opacity = '0';
		objBloom.appendChild(objFrame);

	var objImg = document.createElement("img");
		objImg.setAttribute('id','image');
		objImg.setAttribute('alt','Click to close');
		if(this.ie) objImg.style.filter = 'alpha(opacity=0)';
		else objImg.style.opacity = '0';
		objImg.style.display = 'none';
		objImg.onclick = function(){myGallery.fetch()};
		objImgHolder.appendChild(objImg);	
	
	var objDescCont = document.createElement("div");
		objDescCont.setAttribute('id','descCont');
		objBloom.appendChild(objDescCont);
		
	var objDescBg = document.createElement("div");
		objDescBg.setAttribute('id','descbg');
		if(this.ie) objDescBg.style.filter = 'alpha(opacity=60)';
		else objDescBg.style.opacity = '0.6';
		objDescCont.appendChild(objDescBg);		
	
	var objCloseDescImg = document.createElement("img");
		objCloseDescImg.setAttribute('src', 'gallery/desc.gif');
		objCloseDescImg.setAttribute('id', 'closeDesc');
		objCloseDescImg.setAttribute('alt', 'closeDesc');
		objDescCont.appendChild(objCloseDescImg);

	var objDesc = document.createElement("div");
		objDesc.setAttribute('id','desc');
		objDescCont.appendChild(objDesc);
	
	var objNav = document.createElement("div");
		objNav.setAttribute('id','display');
		objBloom.appendChild(objNav);
					
	var objPrevImg = document.createElement("img");
		objPrevImg.setAttribute('src', 'gallery/prevBtn.jpg');
		objPrevImg.setAttribute('id', 'prev');
		objPrevImg.setAttribute('alt', 'Previous');
		objPrevImg.onclick = function(){myGallery.previous()};
		objNav.appendChild(objPrevImg);
		
	var objNextImg = document.createElement("img");
		objNextImg.setAttribute('src', 'gallery/nextBtn.jpg');
		objNextImg.setAttribute('id', 'next');
		objNextImg.setAttribute('alt', 'Next');
		objNextImg.onclick = function(){myGallery.next()};
		objNav.appendChild(objNextImg);
										
	var objCount = document.createElement("span");
		objCount.setAttribute('id', 'imgNumber');
		objNav.appendChild(objCount);
		
	delete this.setUp;
}

Gallery.prototype.populate = function()
{
	this.links = document.getElementsByTagName('a');	
	var j = this.links.length;
	var expTest = new RegExp('row[.][a-zA-Z0-9]*');
	
	for(i=0;i<j;i++)
	{
		if(this.links[i].rel)
		{
			if(this.links[i].rel == 'solo')
			{
				this.links[i].onclick = function(){myGallery.bloom(this.firstChild.attributes,this.href);return false;};
				this.bloomLinks.push(this.links[i]);
			}
			if(this.links[i].rel.match(expTest))
			{
				this.links[i].onclick = function(){myGallery.bloom(this.firstChild.attributes, this.href, this.rel);return false;};
				this.linkRow.push(this.links[i]);
			}
			if(this.links[i].rel == 'frame')
			{
				this.links[i].onclick = function(){myGallery.displayFrame(this.attributes);return false;};
			}
		}
	}
}

//Check if the picture is loaded and display it if it is
Gallery.prototype.charge = function()
{
	if(this.image.complete)
	{
		clearInterval(this.bloomTime);
		this.displayPic();
	}
	else return false;
}

//launch the display
Gallery.prototype.bloom = function(element, href, container)
{	
	if(element.name) this.imgName = element.name.value;
	else this.imgName = 'Gallery';	
	if(container != null)
	{
		this.getCurrentImg(element, container, href);
	}
	else
	{
		this.isPartSet = false;
		this.image.src = href;//this.folder+arrayPath[arrayPath.length-1];
		this.setBloomDiv();
	}
}	

//diplay gallery div
Gallery.prototype.setBloomDiv = function()
{	
	this.positioning('bloom', 48, 48, 0);
	if(this.ie && !this.ie7) document.getElementById('bg').style.top = document.documentElement.scrollTop+'px';		
	document.getElementById('bg').style.display = '';
	document.getElementById('bloom').style.display = '';
}

//add the picture in the div and start to increase it opacity
Gallery.prototype.displayPic = function()
{	
	this.positioning('bloom', this.image.height, this.image.width, 40);		
	document.getElementById('bloom').style.width = this.image.width+'px';
	if(this.isPartSet)
	{
		document.getElementById('bloom').style.height = this.image.height+40+'px';
		document.getElementById('descCont').style.bottom = '30px';
		document.getElementById('display').style.display = 'block';
		document.getElementById('imgNumber').innerHTML = this.imgNum+1+' of '+this.intElements;
		this.preload();
	}
	else 
	{
		document.getElementById('bloom').style.height = this.image.height+20+'px';
		document.getElementById('descCont').style.bottom = '10px';
	}
	
	var elemImg = document.getElementById('image');	
	if(this.ie) document.getElementById('bg').style.top = document.documentElement.scrollTop+'px';	
	elemImg.src = this.image.src;
	elemImg.style.display = '';		
	this.bloomOp.upOpacity('image',1);		
	elemImg.style.marginTop = '0';		
	document.getElementById('title').style.display = 'block';
	document.getElementById('imgName').innerHTML = this.imgName;
		
	if(this.description != '')
	{
		document.getElementById('descCont').style.display = 'block';
		document.getElementById('desc').style.width = this.image.width-10+'px';
		document.getElementById('descbg').style.width = this.image.width+'px';
		document.getElementById('desc').innerHTML = this.description;
		document.getElementById('closeDesc').onclick = function(){document.getElementById('descCont').style.display = 'none';}
	}
}

Gallery.prototype.displayFrame = function(attributes)
{
	this.frame = document.getElementById('frame');

	this.frame.src = attributes.href.value;
	
	this.positioning('bloom', 400, 400, 40);
	
	document.getElementById('bloom').style.width = '400px';
	document.getElementById('bloom').style.height = '420px';
	
	document.getElementById('bg').style.display = '';
	document.getElementById('bloom').style.display = '';
	document.getElementById('title').style.display = 'block';
	
	this.frame.style.display = '';
	this.bloomOp.upOpacity('frame',1);
}

//Get the number of the current picture in the picture table
Gallery.prototype.getCurrentImg = function(element, container, href) 
{
	this.setArray = new Array();

	for(i = 0 , j=this.linkRow.length ; i<j ; i++)
	{
		if(this.linkRow[i].rel == container) this.setArray.push(this.linkRow[i]);
	}
	this.intElements = this.setArray.length;
	
	this.imgNum = 0;
	while((this.setArray[this.imgNum].href != href) && (this.imgNum < this.intElements-1)){this.imgNum++;}
	this.setBloomDiv();			
	this.changePic();
}
		
Gallery.prototype.changePic = function()
{
	if(document.all){document.getElementById('image').filters.alpha.opacity = 0;}
	else {document.getElementById('image').style.opacity = 0;}
	
	this.bloomOp.clearTimeIntervalOp();
	
	document.getElementById('descCont').style.display = 'none';
	
	this.description = this.setArray[this.imgNum].firstChild.alt;
	this.imgName = (this.setArray[this.imgNum].firstChild.name) ? this.setArray[this.imgNum].firstChild.name : 'Gallery';
	this.image.src = this.setArray[this.imgNum].href;
}

//preload previous and next picture
Gallery.prototype.preload = function()
{
	if(this.imgNum < this.intElements-1)//preload next picture if applicable
	{
		this.imageNext.src = this.setArray[this.imgNum+1].href;
	}
	if(this.imgNum > 0)//preload previous picture if applicable 
	{
		this.imagePrev.src = this.setArray[this.imgNum-1].href;
	}
}
	
//move to next picture in the gallery
Gallery.prototype.next = function()
{
	if(this.imgNum < this.intElements-1)
	{
		this.imgNum++;
		this.changePic();
	}
}

//move to previous picture in the gallery
Gallery.prototype.previous = function()
{
	if(this.imgNum>0)
	{
		this.imgNum--;			
		this.changePic();
	}
}

//close the holder of the picture (popup)
Gallery.prototype.fetch = function()
{
	this.bloomOp.clearTimeIntervalOp();
	this.clearTimer();
	if(document.all)
	{
		document.getElementById('image').filters.alpha.opacity=0;
		document.getElementById('frame').filters.alpha.opacity=0;
	}
	else
	{
		document.getElementById('image').style.opacity = 0;
		document.getElementById('frame').style.opacity = 0;
	}
	document.getElementById('image').style.display = 'none';
	document.getElementById('bg').style.display = 'none';
	document.getElementById('title').style.display = 'none';
	document.getElementById('display').style.display = 'none';
	document.getElementById('descCont').style.display = 'none';
	document.getElementById('desc').style.innerHTML = '';
	document.getElementById('image').style.marginTop = '20px';
	document.getElementById('bloom').style.display = 'none';
	document.getElementById('bloom').style.height = '40px';
	document.getElementById('bloom').style.width = '40px';
	document.getElementById('frame').style.display = 'none';
	this.setArray = null;
	this.isPartSet = true;
}
//put an element in the centre of the screen
Gallery.prototype.positioning = function(element, height, width, moreHeight)
{
	if(document.all)
	{
		document.getElementById(element).style.left = (document.documentElement.offsetWidth/2) - (width/2)+document.documentElement.scrollLeft+'px';
		document.getElementById(element).style.top = (document.documentElement.offsetHeight/2) - ((height+moreHeight)/2)+document.documentElement.scrollTop+'px';
	}
	else
	{
		document.getElementById(element).style.left = (window.innerWidth - width)*0.5+'px';
		document.getElementById(element).style.top = ((window.innerHeight - (height+moreHeight))/2+window.pageYOffset)+'px';
	}
}

Gallery.prototype.clearTimer = function()
{
	window.clearInterval(this.bloomTime);
}

//Class manager of the opacity; can change the opacity of an object until it reach the end value;
function opacity()
{
	this.o = 0;
	this.timeOp = 0;//timer for opacity thread
}

opacity.prototype.upOpacity = function (id, end)
{
	this.timeOp = setInterval('myGallery.bloomOp.increaseOp(\''+id +'\', '+end+')', 60);
}

opacity.prototype.clearTimeIntervalOp = function()
{
	clearInterval(this.timeOp);
	this.o = 0;
}

opacity.prototype.increaseOp = function(id, end)
{
	if(this.o > end)
	{			
		document.all ? document.getElementById(id).filters.alpha.opacity=this.o*100 : document.getElementById(id).style.opacity = this.o;
		this.clearTimeIntervalOp();
	}
	else
	{
		this.o += 0.08;
		document.all ? document.getElementById(id).filters.alpha.opacity=this.o*100 : document.getElementById(id).style.opacity = this.o;
	}
}

	

/* Made by Ben, www.ai-development.com, 2007 */