var GUIUtilities = new Object();

GUIUtilities = {
    getPageSize : function() {
	var offsetx, offsety;

	if (window.innerHeight && window.scrollMaxY) {	
	    xoffset = document.body.scrollWidth;
	    yoffset = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){
	    xoffset = document.body.scrollWidth;
	    yoffset = document.body.scrollHeight;
	} else {
	    xoffset = document.body.offsetWidth;
	    yoffset = document.body.offsetHeight;
	}
	
	var width, height;
	if (self.innerHeight) {	
	    width = document.documentElement.clientWidth || self.innerWidth;
	    height = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) {
	    width = document.documentElement.clientWidth;
	    height = document.documentElement.clientHeight;
	} else {
	    width = document.body.clientWidth;
	    height = document.body.clientHeight;
	}	
	
	var pageWidth = (xoffset > width) ? width : xoffset;
	var pageHeight = (yoffset < height) ? height : yoffset;
	
	return new Array(pageWidth, pageHeight, width, height);
    },
    getPagePos : function(){
	if (self.pageYOffset) {
	    return self.pageYOffset;
	} else if (document.documentElement && document.documentElement.scrollTop){
	    return document.documentElement.scrollTop;
	} else {
	    return document.body.scrollTop;
	}
    },
    setElementRect : function(e, pos) {

	e.style.top = pos[0] + 'px';
	e.style.left = pos[1] + 'px';
	e.style.width = pos[2] + 'px';
	e.style.height = pos[3] + 'px';
    },
    getElementRect : function(e) {
	return new Array(
			 document.layers ? e.top : (e.offsetTop || e.style.pixelTop || 0),
			 document.layers ? e.left : (e.offsetLeft || e.style.pixelLeft || 0),
			 document.layers ? e.clip.width : (e.offsetWidth || e.style.pixelWidth || 0),
			 document.layers ? e.clip.height : (e.offsetHeight || e.style.pixelHeight || 0));
    },
    getElementAbsolutedPosition : function(e) {
    	var offTop = 0, offLeft = 0;
    	do {
    		offTop += e.offsetTop  || 0;
    		offLeft += e.offsetLeft || 0;
      		e = e.offsetParent;
      		if (e && e.tagName == 'BODY') break;
	    } while (e);
    	return new Array(offTop, offLeft);
  	}	
}

var loadingImage;
var imagePadding = 8;

function setupLightbox() {
	if(document.getElementsByTagName){
		loadingImage = new Image();
		loadingImage.src = "/image/loading.gif";
		
		var anchors = document.getElementsByTagName('a');
		for(var i=0; i<anchors.length; i++){
            var anchor = anchors[i];
            if (anchor.getAttribute('rel') == 'lightbox'){
                anchor.onclick = function() { lightbox(this); return false; };
            }
        }
        
      	var objBody = document.getElementsByTagName('body').item(0);
    	objBody.appendChild(
			Builder.node('div', {id:'lightbox'}, [
				Builder.node('div', {id:'closebox'}, [
					 Builder.node('div', {id:'closeCircle'}),
					 Builder.node('img', {id:'closeLabel', src:'/image/close_white.png'})
				]),
				Builder.node('div', {id:'imagebox'}, [
					Builder.node('img', {id:'lightboxImage'}),
					Builder.node('div', {id:'lightboxCaption'})
				])
			])
		)
		$('lightbox').hide().observe('click', function(){closeLightbox(); });
		$('closeCircle').hide().observe('click', function(){closeLightbox(); });
		$('closebox').observe('mouseover', function(){ $('closeCircle').show(); });
		$('closebox').observe('mouseout', function(){ $('closeCircle').hide(); });
		
	}
}


function lightbox(anchor){
    var pageSize = GUIUtilities.getPageSize();
    var pos = GUIUtilities.getPagePos();
	
    var boxWidth = (loadingImage.width > 0 ? loadingImage.width : 64) + imagePadding * 2;
    var boxHeight = (loadingImage.height > 0 ? loadingImage.height : 64) + imagePadding * 2;

    var lightboxLeft = ((pageSize[0]  - boxWidth) / 2);
    var lightboxTop = pos + (pageSize[3] - boxHeight) / 2;
    
    if(!$('lightbox').visible()){ // if lightbox has already displaied
    	Element.setStyle('lightbox',{ 
			height: boxHeight + 'px',
			width: boxWidth + 'px',
			top: lightboxTop + 'px',
			left: lightboxLeft + 'px' });
			new Effect.Appear('lightbox', { 
				from: 0.0,
				to: 1.0,
				duration: 0.8});
   	}
	
	$('lightboxCaption').hide();
	$('lightboxImage').src = loadingImage.src;
        
    var preloadImage = new Image();
    var objImagebox = document.getElementById('imagebox');
    objImagebox.style.top = '16px';
    objImagebox.style.left = '0px';    
    
    preloadImage.onload = function(event){
	   resizeToImageSize(anchor, preloadImage);
    }
    preloadImage.src = anchor.href;
}


function resizeToImageSize(anchor, preloadImage){

    var pageSize = GUIUtilities.getPageSize();
    var pos = GUIUtilities.getPagePos();
    
    var boxWidth = (preloadImage.width > 0 ? preloadImage.width : 64) + imagePadding * 2;
    var boxHeight = (preloadImage.height > 0 ? preloadImage.height : 64) + imagePadding * 2 + 64 + 16;

    var lightboxLeft = ((pageSize[0]  - boxWidth) / 2);
    var lightboxTop = pos + (pageSize[3] - boxHeight) / 2;
    var objImagebox = document.getElementById('imagebox');
    objImagebox.style.display = 'none';
    
    var showImageCallback = function() {
	   showImage(anchor, preloadImage);
    }
    
    var rect = GUIUtilities.getElementRect(anchor);
    var pos = GUIUtilities.getElementAbsolutedPosition(anchor);
    rect[0] = pos[0]; rect[1] = pos[1];
    
    Position.clone(anchor, $('lightbox'));
    
    new Effect.Morph('lightbox', { style: {
    	height: boxHeight + 'px',
    	width: boxWidth + 'px',
    	top: lightboxTop + 'px',
    	left: lightboxLeft + 'px' },
    	afterFinish: showImageCallback,
    	duration: 0.5
    });
}


function showImage(anchor, preloadImage){
    var objCaption = document.getElementById('lightboxCaption');
    objCaption.style.width = (preloadImage.width > 0 ? preloadImage.width : 64) + 'px';
    
    if(anchor.getAttribute('caption')){
	   objCaption.style.display = 'block';
	   objCaption.innerHTML = anchor.getAttribute('caption');
    }else{
	   objCaption.style.display = 'none';
    }
	
    var objImage = document.getElementById('lightboxImage');
    objImage.src = anchor.href;
   setTimeout('showImagebox();', 0);
  
    return false;
}

function showImagebox() {
    new Effect.Appear('imagebox', {duration: 0.5});
    
}


function closeLightbox(){
	new Effect.Fade('lightbox', {duration: 0.5});
}


function commentbox(anchor){
    if(!$('commentbox')){ return; }
    
    if(!anchor){ anchor = $('comment-button'); }
    var rect = GUIUtilities.getElementRect(anchor);
    var pos = GUIUtilities.getElementAbsolutedPosition(anchor);
    rect[0] = pos[0]; rect[1] = pos[1];
    
    Element.setOpacity('commentbox', 0.0);
     $('commentbox').style.display = 'block';
    Position.clone(anchor, $('commentbox'));
   	//Element.show($('commentbox'));
 
   // Element.setOpacity('commentbox', 0.0);
    
    var pageSize = GUIUtilities.getPageSize();
    var size = $('comments-open').getDimensions();
    var commentboxTop = pos + ((pageSize[3]  - size.height) / 2);
    var commentboxLeft = (pageSize[0] - 400) / 2;
    //Element.setOpacty($('comments-open'), 0.0);
    
	new Effect.Parallel([
		new Effect.Morph('commentbox', { style: {
			       height: size.height + 'px',
					width:   400 + 'px',
					top:      commentboxTop + 'px',
					left:		commentboxLeft + 'px'
		},
					transition: Effect.Transitions.sinoidal
		}),
		new Effect.Opacity('commentbox', {from: 0.0, to:1.0})
		]);
//	new Effect.Opacity('comments-open', { from: 0.0, to: 1.0, queue:'end' });
}


function closeCommentbox(){
	new Effect.Fade('commentbox');
}

function toggleArchive(element) {
	if($(element).visible()){
		Effect.BlindUp(element, {duration: 0.5});
	}else{
		Effect.BlindDown(element, {duration: 0.5});
	}	
}







//----- PhotoGallery
var PhotoGallery = Class.create();

PhotoGallery.prototype = {
	messageList: {},
	activeImage: undefined,
	readyChangeImage: false,
	initialize: function() {
		var pb = $('photogallery');
		if(pb){
			this.photoList = {};
			var items = $A(pb.getElementsByTagName('li'));
			items.each( function(item) {
				var msg = $(item.id+'-m');
				var anchors = $A(item.getElementsByTagName('a'));
				anchors.each( function(anchor){
					 anchor.onclick = function() { this.start(anchor.href); return false; }.bind(this);
					 if(msg){ this.messageList[anchor.href] = msg.innerHTML; };
				}.bind(this));
				if(msg){ msg.remove(); };
				Element.removeClassName(item, 'photogallery-thumbnail');
				Element.addClassName(item, 'photogallery-thumbnail-bar');
			}.bind(this));
		
			pb.appendChild( Builder.node('div', {id: 'photogallery-large'},[
				Builder.node('div', {id: 'photogallery-large-inner'},[
					Builder.node('img', {id: 'photogallery-large-image'}),
					Builder.node('div', {id: 'photogallery-large-message'})
					])
				])
			)
			$('photogallery-large').hide();
		}
	},
	start: function(src) {
		if($('photogallery-large').visible()){
			new Effect.Fade('photogallery-large', {
				duration: 0.5,
				afterFinishInternal: function(effect) {
					this.finishEffect(src);
				}.bind(this),
				queue:'end'});
			this.readyChangeImage = false;
		}else{
			this.readyChangeImage = true;
		}
		this.activeImage = new Image();
    	this.activeImage.onload = function(event){
    		this.changeImage(src);
    	}.bind(this);
    	this.activeImage.src = src;
    },
    finishEffect: function(src){
    	this.readyChangeImage = true;
		if(this.activeImage.complete){
    		this.changeImage(src);
    	}
    },
    changeImage: function(src) {
    	if(this.readyChangeImage){
    		$('photogallery-large-image').src = src;
    		if(this.messageList[src]){
	    		$('photogallery-large-message').innerHTML = this.messageList[src];
    		}
    		new Effect.Appear('photogallery-large', {duration: 0.5, queue:'end'});
    	}
    }
}