var activeImage = false;

var imageGalleryObj = false;



function showImage() {

	if(activeImage){

		activeImage.style.filter = 'alpha(opacity=33)';

		activeImage.style.opacity = 0.33;

	}

	this.style.filter = 'alpha(opacity=100)';

	this.style.opacity = 1;

	activeImage = this;

	showBigImage(); // this have to be comments

}



/*function showBigImage() AND function getBigImageName(smallImageName) is for Roll over Big image*/

/* If U want to see Onclick Event then at first U have to comments "showBigImage();" AND  remove comments from "clientsImages[no].onclick = showBigImage;" */

function showBigImage(){

	var divName = String(activeImage.name.toString());

	divName = divName.substring(4, divName.length);

	

	bigImageObject = null;

	bigImageObject = document.getElementById(divName);

	

	if (bigImageObject != null ) {

		bigImageObject.innerHTML = "<img src=" + getBigImageName(activeImage.src) + ">";

	}

}



function getBigImageName(smallImageName){

	bigImageName = String(smallImageName).replace('-s-', '-l-');

	return bigImageName; 

}





function hideImage() {

	if(activeImage){

		activeImage.style.filter = 'alpha(opacity=33)';

		activeImage.style.opacity = 0.33;

	}

	this.style.filter = 'alpha(opacity=33)';

	this.style.opacity = 0.33;

	activeImage = null;

}



function initImageShow() {

	var tables = new Array("hoveropacity", "hoveropacity_01", "hoveropacity_02", "hoveropacity_03");

	

	for(i = 0; i < tables.length; i++)

	{

		tempObj = document.getElementById(tables[i]);

		if (tempObj != null ) {

			imageGalleryObj = tempObj;

			var clientsImages = imageGalleryObj.getElementsByTagName('IMG');

			for(var no=0;no<clientsImages.length;no++){

				clientsImages[no].onmouseover = showImage;

				clientsImages[no].onmouseout = hideImage;

				//clientsImages[no].onclick = showBigImage; // this have to be removed comments

				clientsImages[no].style.filter = 'alpha(opacity=33)';

				clientsImages[no].style.opacity = 0.33;

			}

		}

	}	

}



window.onload = initImageShow;