/******************************************************
* CG_Photogallery
* Description: Javascript Photogallery. 
* Author: Jiwon Han
* Email: iamjiwon@hotmail.com
* virsion : v.0.1
* Last Modified : 12/1/2007
* Copyright (C) 2007 cybergolf.com
* Tested Browser : IE, FireFox
******************************************************/

var userAgents = navigator.userAgent.toLowerCase();
var browser = new Object();
//detect OS
if (checkIt("mac"))
	browser.os="mac";
else if (checkIt("windows"))
	browser.os="windows";
else if (checkIt("linux"))
	browser.os="linux";
else
	browser.os="unknown";
//detect browser
if(checkIt("konqueror"))
	browser.name="Konqueror";
else if(checkIt("safari"))
	browser.name="safari";
else if(checkIt("opera"))
	browser.name="opera";
else if(checkIt("msie")){
	browser.name="IE";
	if(checkIt("msie 6"))
		browser.version=6;
}
else if(checkIt("firefox"))
	browser.name="firefox";
else if(checkIt("netscape")){
	browser.name="netscape";
	browser.version=userAgents.charAt(8);
}
else
	browser.name="unknown";

function checkIt(str)
{
	return userAgents.indexOf(str)+1;
}
//Set up show hide string. it will different by browser
if (browser.name == "netscape" && browser.virsion == "4"){
	STR_SHOW = "show";
	STR_HIDE = "hide";
}
else{
	STR_SHOW = "visible";
	STR_HIDE = "hidden";
}

//=============================
//Declare global variables
//=============================
var CG_thumbnail_maxWidth;
var CG_thumbnail_maxHeight;
var CG_fullImage_maxWidth;
var CG_fullImage_maxHeight;
var CG_isFrameSet = false;
var CG_thumbnailCount;

//=================================================
// Class CG_PhotoGallery
//=================================================
function CG_PhotoGallery(){
	this.photoGallery_type = 1; //horizontal
	this.thumbnail_width = 50;
	this.thumbnail_height = 50;
	this.thumbnail_bgColor = "E6C077";
	this.thumbnail_borderOverColor = "AF7724";
	this.thumbnail_borderOutColor = "ffffff";
	
	this.fullImage_frame = "frame.png";
	this.fullImage_bgColor = "eeeeee";

	this.description_height = 40;
	this.description_bgColor = "CC9933";
	this.arr_photos = new Array();
	
	this.fullImage_width = 400;
	this.fullImage_height = 400;
	this.thumbnail_cols_number = 3;
	this.thumbnail_column_width = 160;
}

CG_PhotoGallery.prototype.build = function(){
	var maxCols = this.thumbnail_cols_number;
	var html = "";
	var n;
	html += "<table cellpadding=0 cellspacing=0 border=0 id=CG_photoGallery width='"+this.photoGallery_width+"' height='"+this.photoGallery_height +"'><tr>\n";
	
	if (this.photoGallery_type == 1){
		html += "<td valign=top align=center id=CG_thumbnail bgColor='"+this.thumbnail_bgColor+"' width='"+this.thumbnail_column_width+"'>\n";
		html += "<table cellpadding=1 cellspacing=0>\n";
		n = 1;
		for (i=0; i<this.arr_photos.length; i++){
			if ((n % maxCols) == 1) html += "<tr>\n";
			html += "<td align=center><span id='thumbnail"+n+"'";
			if (this.thumbnail_clickable != "no") html += " onClick=show_fullImage('"+this.arr_photos[i].fullImage_path+"');";
			html += " onMouseOver=change_fullImage('"+this.arr_photos[i].fullImage_path+"');changeDescription('"+this.arr_photos[i].description.replace(/ /g,"_")+"'); style='cursor:pointer;'>\n";
			html += "<table cellpadding=0 cellspacing=0 width="+this.thumbnail_width+" height="+this.thumbnail_height+" bgColor='"+this.thumbnail_bgColor+"'";
			html += " onMouseOver=changeThumbnailBorder(this,'"+this.thumbnail_borderOverColor+"');";
			html += " onMouseOut=changeThumbnailBorder(this,'"+this.thumbnail_borderOutColor+"');";
			html += " style='border:1px solid #"+this.thumbnail_borderOutColor+";'>\n";
			html += "<tr><td align=center>\n";
			html += "<img src="+this.arr_photos[i].thumbnail_path+" border=0 onload='resize_thumbnail(this);' id='thumnailImage"+n+"'><br>\n";
			html += "</td></tr></table></span></td>\n";
			if ((n % maxCols) == 0) html += "</tr>\n";
			n++;
		}
		html += "</table>\n";
		html += "</td><td width=5></td>"
		html += "<td width='"+this.fullImage_width+"' valign=top>\n";
		html += "<table width='"+this.fullImage_width+"' cellpadding=0 cellspacing=0>";
		html += "<tr><td bgColor='"+this.fullImage_bgColor+"' height='"+this.fullImage_height+"' id=CG_fullImage align=center width='"+this.fullImage_width+"'>\n";
		if (browser.name == "IE" && browser.version == 6)
			html += "<span id=CG_frame style=z-index:2;position:absolute;height:"+this.fullImage_height+";width:"+this.fullImage_width+";filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.fullImage_frame+"',sizingMethod='scale');></span>\n";
		else
			html += "<span id=CG_frame style='z-index:2; position:absolute;'><img src='"+this.fullImage_frame+"'></span>\n";
		html += "<span id=CG_loadingBar style='z-index:1; position:absolute; visitility:"+STR_HIDE+";'></span>\n";
		html += "<img src='"+this.arr_photos[0].fullImage_path+"' border=0 id=full_image onLoad='resize_fullImage(this.src);'><br />\n";
		html += "</td></tr>\n";
		html += "<tr><td id=CG_description height='"+this.description_height+"' bgColor='"+this.description_bgColor+"' style='font-size:11px;font-family:arial;color:#333333;padding:4px;'>";
		html += "<span id=CG_description class='cg_description'>"+this.arr_photos[0].description+"</span>";
		html += "</td></tr></table>\n";
		html += "</td>\n";
	}
	html += "</tr></table>\n";
	html += "<span id=CG_mask style='z-index:100; position:absolute; top:0px; left:0px; visibility:"+STR_HIDE+"; background-color:#666666;'></span>\n";
	html += "<span id=CG_popupImage style='z-index:200; position:absolute; visibility:"+STR_HIDE+";'></span>\n";
	//alert(html);
	document.write(html);
	this.init();
}

CG_PhotoGallery.prototype.init = function(){
	//Set global variables
	CG_thumbnail_maxWidth = this.thumbnail_width;
	CG_thumbnail_maxHeigth = this.thumbnail_height;
	CG_fullImage_maxWidth = this.fullImage_width;
	CG_fullImage_maxHeigth = this.fullImage_height;
	CG_thumbnailCount = this.arr_photos.length;
	//Calculate Photo Gallery width and height
	this.calcPhotoGallerySize();
	window.onload = CG_PhotoGallery_windowOnload;
}


CG_PhotoGallery.prototype.calcPhotoGallerySize = function(){
	if (this.photoGallery_type == 1){
		this.photoGallery_width = parseInt(this.fullImage_width) + parseInt(this.thumbnail_column_width)+5;
		this.photoGallery_height = parseInt(this.fullImage_height) + parseInt(this.description_height);
	}
}

function CG_PhotoGallery_windowOnload(){
	for (i=1; i<=CG_thumbnailCount;i++){
		resize_thumbnail('thumnailImage'+i);
	}
	setPosition_frame();
}

//=================================================
// Class CG_Photo
//=================================================
function CG_Photo(thumbnail,fullImage,description){
	this.thumbnail_path = thumbnail ? thumbnail : "";
	this.fullImage_path = fullImage ? fullImage : "";
	this.description = description ? description : "";
}

CG_PhotoGallery.prototype.addPhoto = function(oPhoto){
	this.arr_photos[this.arr_photos.length] = oPhoto;
}
function resize_thumbnail(thumbnail){
	if (thumbnail.width > thumbnail.height)
		thumbnail.width = CG_thumbnail_maxWidth;
	else
		thumbnail.height = CG_thumbnail_maxHeigth;
}
function resize_fullImage(img_path){
	var MAX_WIDTH = CG_fullImage_maxWidth;
	var MAX_HEIGHT = CG_fullImage_maxHeigth-1;
	var selectedImg = new Image();
	selectedImg.src = img_path;
	var resizeWidth = selectedImg.width;
	var resizeHeight = selectedImg.height;
	

	if (resizeWidth > MAX_WIDTH){
		resizeHeight = calcHeight(resizeWidth,resizeHeight,MAX_WIDTH);
		resizeWidth = MAX_WIDTH;
		
	}
	if (resizeHeight > MAX_HEIGHT){
		resizeWidth = calcWidth(resizeWidth,resizeHeight,MAX_HEIGHT);
		resizeHeight = MAX_HEIGHT;	
	}
	var fullImage = document.getElementById("full_image");
	fullImage.width = resizeWidth;
	fullImage.Height = resizeHeight;
	hideLoadingBar();
	if (!CG_isFrameSet)
		setPosition_frame();
}

function setPosition_frame(){
	var frame = document.getElementById("CG_frame");
	var fullImageArea = document.getElementById("CG_fullImage");
	frame.style.left = calcPositionX(fullImageArea);
	frame.style.top = calcPositionY(fullImageArea);
	CG_isFrameSet = true;
}
function calcPositionX(theObject)
{
	currPosX = 0;
	while (theObject.offsetParent){
		currPosX += theObject.offsetLeft;
		theObject = theObject.offsetParent;
	}
	return currPosX;
}

function calcPositionY(theObject)
{
	currPosY = 0;
	while (theObject.offsetParent){
		currPosY += theObject.offsetTop;
		theObject = theObject.offsetParent;
	}
	return currPosY;
}
function calcHeight(oldWidth,oldHeight,newWidth){
	x = oldWidth / newWidth;
	newHeight = Math.round(oldHeight / x);
	return newHeight;
}
function calcWidth(oldWidth,oldHeight,newHeight){
	x = oldHeight / newHeight;
	newWidth = Math.round(oldWidth / x);
	return newWidth;
}
function change_fullImage(img_path){
	showLoadingBar();
	document.getElementById("full_image").src = img_path;
}
function changeDescription(text){
	document.getElementById("CG_description").innerHTML = "<span id='cg_description' class='cg_description'>" + text.replace(/_/g," ") + "</span>";
}
function showLoadingBar(){
	var loadingBar = document.getElementById("CG_loadingBar");
	var fullImageArea = document.getElementById("CG_fullImage");
	var loadingBarWidth = CG_fullImage_maxWidth;
	var loadingBarHeight= 30;
	var loadingBarLeftPosition = calcPositionX(fullImageArea) + ((fullImageArea.width - loadingBarWidth) / 2);
	var loadingBarTopPosition = calcPositionY(fullImageArea) + ((fullImageArea.height - loadingBarHeight) / 2);
	loadingBar.style.left = loadingBarLeftPosition;
	loadingBar.style.top = loadingBarTopPosition;
	var html = "<table cellpadding=6 cellspacing=0 width='"+loadingBarWidth+"' height='"+loadingBarHeight+"' bgColor=ffffff><tr><td align=center style='font-size:11px; font-family:arial; color:000000;'><i>Loading Image...</i></td></tr></table>";
	loadingBar.innerHTML = html;
	loadingBar.style.visibility = STR_SHOW;
	fadeObj(loadingBar.id,60);
}
function hideLoadingBar(){
	var loadingBar = document.getElementById("CG_loadingBar");
	loadingBar.style.visibility = STR_HIDE;
}

function changeThumbnailBorder(thumbnail,color){
	thumbnail.style.border='1px solid #' + color;
}

function show_fullImage(img_path){	
	showMask();
	showPopupImage(img_path);
}

function hide_fullImage(){
	var popupImage = document.getElementById("CG_popupImage");
	var mask = document.getElementById("CG_mask");
	popupImage.style.visibility = STR_HIDE;
	mask.style.visibility = STR_HIDE;
}

function showMask(){
	var mask = document.getElementById("CG_mask");
	//var scrollXY = getScrollXY();
	var scrollSize = getFullPageSize();
	var browserSize = getBrowserSize();
	//mask.style.left = scrollXY.left + "px";
	//mask.style.top = scrollXY.top + "px"
	mask.style.width = browserSize.width + "px";
	mask.style.height = scrollSize.height + "px";

	if (mask.style.opacity)
		mask.style.opacity = 0.6;
	else
		mask.style.filter = "Alpha(opacity=60)"; 
	mask.style.visibility = STR_SHOW;
	//alert(document.body.scrollHeight);
}

function showPopupImage(img_path){
	var popupImage = document.getElementById("CG_popupImage");
	popupImage.innerHTML = "<table cellpadding=0 cellspacing=0 style='border:1px solid #666666;' bgColor=ffffff><tr><td align=right height=26 style='padding-right:1px;'><input type=button value=Close onClick='hide_fullImage();' style='font-size:14px; color:#ffffff; font-weight:bold; border:2px solid #000000; background-color:#000000; cursor:pointer;'></td></tr><tr><td style='padding-left:26px;padding-right:26px;padding-bottom:26px;'><img src="+img_path+"></td></tr></table>";
	var popupWidth = popupImage.offsetWidth;
	var popupHeight = popupImage.offsetHeight;
	var browserSize = getBrowserSize();
	var scrollXY = getScrollXY();
	var l = (browserSize.width - popupWidth) / 2;
	var t = ((browserSize.height - popupHeight) / 2) + scrollXY.top;
	if (l < 0) l = 1;
	if (t < 0) t = 1;
	popupImage.style.left = l;
	popupImage.style.top = t;
	popupImage.style.visibility = STR_SHOW;
}


function fadeObj(oID,opacity){
	var obj = eval(oID);
	if (browser.name == "IE")
		obj.style.filter = "Alpha(opacity=" + opacity + ")"; 
	else
		obj.style.opacity = (opacity / 100);
}

function getBrowserSize() {
	var intH = 0;
	var intW = 0;
               
	if (typeof window.innerWidth  == 'number' ) {
		intH = window.innerHeight;
		intW = window.innerWidth;
	} 
	else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
		intH = document.documentElement.clientHeight;
		intW = document.documentElement.clientWidth;
	}
	else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
		intH = document.body.clientHeight;
		intW = document.body.clientWidth;
	}
	return { width: parseInt(intW), height: parseInt(intH) };
	
}

function getScrollXY() {
	var scrOfX = 0, scrOfY = 0;
	if( typeof( window.pageYOffset ) == 'number' ) {
		scrOfX = window.pageXOffset;
		scrOfY = window.pageYOffset; 	
	} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
		scrOfX = document.body.scrollLeft;
		scrOfY = document.body.scrollTop; 
	} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
		scrOfX = document.documentElement.scrollLeft;
		scrOfY = document.documentElement.scrollTop; 
	}
	return { left: parseInt(scrOfX), top: parseInt(scrOfY) };
}


function getFullPageSize() {
	var scrOfW = 0, scrOfH = 0;
	if( typeof( window.scrollWidth ) == 'number' ) {
		scrOfW = window.scrollWidth;
		scrOfH = window.scrollHeight; 	
	} else if( document.body && ( document.body.scrollWidth || document.body.scrollHeight ) ) {
		scrOfW = document.body.scrollWidth;
		scrOfH = document.body.scrollHeight; 
	} else if( document.documentElement && ( document.documentElement.scrollWidth || document.documentElement.scrollHeight ) ) {
		scrOfW = document.documentElement.scrollWidth;
		scrOfH = document.documentElement.scrollHeight; 
	}
	return { width: parseInt(scrOfW), height: parseInt(scrOfH) };
}


window.onresize = function(){
	var mask = document.getElementById("CG_mask");
	if (mask.style.visibility == STR_SHOW){
		mask.style.width = getFullPageSize().width + "px";
		mask.style.height = getFullPageSize().height + "px";
	}

	var popupImage = document.getElementById("CG_popupImage");
	if (popupImage.style.visibility == STR_SHOW){
		var popupWidth = popupImage.offsetWidth;
		var popupHeight = popupImage.offsetHeight;
		var browserSize = getBrowserSize();
		var scrollXY = getScrollXY();
		var l = (browserSize.width - popupWidth) / 2;
		var t = ((browserSize.height - popupHeight) / 2) + scrollXY.top;
		if (l < 0) l = 1;
		if (t < 0) t = 1;
		popupImage.style.left = l;
		popupImage.style.top = t;
	}

	if (CG_isFrameSet)
		setPosition_frame();
}