// Loading Image Path
var loadimgpath = "/rivalry/images/loading.gif";

var PhotoDetail = new Class({
	
	initialize: function(imgHref) {
		this.imgHref = imgHref;
		this.img = null;
		this.container = $(document.body);
		this.detailFrame = null;
		this.ie = false;
	},
	
	displayImage: function() { 
		
		// must create alternative this var for use in callback function
		_this = this;
		
		this.createFrame();
		
		this.detailFrame.injectInside(this.container);
		
		if(this.detailFrame.getStyle('position') == 'absolute') {
			this.ie = true;
		}
		
		if(this.ie) {
			window.onscroll = function(){
				if($('detailFrame')) {
					_this.centerFrame();
				}
			}
		}
		
		this.centerFrame();
		
		// load image asset, save to class member var
		this.img = new Asset.image(this.imgHref,{onload:function() {
			
			_this.detailFrame.getFirst().destroy();
			
			_this.detailFrame.setStyle('height',this.height+4);
			_this.detailFrame.setStyle('width',this.width+4);
			
			_this.centerFrame();
			
			this.injectInside(_this.detailFrame);
			
			_this.createCloseControl();
			
		}});
		
	},
	
	createFrame: function() {
		
		if($('detailFrame')) {
			$('detailFrame').destroy();
		}
		
		this.detailFrame = new Element('div',{'id':'detailFrame','styles':{'height':35,'width':31,'textAlign':'center'}});
		
		loadingImg = new Element('img',{'src':loadimgpath});
		
		loadingImg.injectInside(this.detailFrame);
		
		this.detailFrame.addEvent('click',function() {
				this.destroy();
		});
	},
	
	centerFrame: function() {
		
		// centering vertically
		frameWidth = this.detailFrame.getCoordinates().width;
		windowWidth = getWindowSize().width;
		this.detailFrame.setStyle('left',(windowWidth/2)-(frameWidth/2)+'px');
		
		//centering horizontally
		if(this.ie) {
			pageScrolled = $(window).getScroll().y;
		} else {
			pageScrolled = 0;
		}
		frameHeight = this.detailFrame.getCoordinates().height;
		windowHeight = getWindowSize().height;
		this.detailFrame.setStyle('top',(windowHeight/2)-(frameHeight/2)+pageScrolled+'px');
	
	},
	
	createCloseControl: function() {
		
		var closeDivHeight = 18;
		
		var closeDiv = new Element('div',{'styles':{'height':closeDivHeight + 'px','textAlign':'right'}});
		
		this.detailFrame.setStyle('height',this.detailFrame.getStyle('height').toInt() + closeDivHeight + 'px');
		
		var closeImg = new Element('img',{'src':'/rivalry/images/closeFrame.gif','styles':{'cursor':'pointer'}});
		
		_this = this;
		
		closeImg.addEvent('click',function() {
			_this.detailFrame.destroy();
		});
		
		closeImg.injectInside(closeDiv);
		
		closeDiv.inject(this.detailFrame,'top');
		
	}
});

function showPhotoDetail(imgHref) {

	var detail = new PhotoDetail(imgHref);
	detail.displayImage();

}

function getWindowSize() {
	var x,y = 0;
	
	if(self.innerHeight) {
		x = self.innerWidth;
		y = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) {
		x = document.documentElement.clientWidth;
		y = document.documentElement.clientHeight;
	} else if (document.body) {
		x = document.body.clientWidth;
		y = document.body.clientHeight;
	}
	
	return {'width':x,'height':y};
}