﻿/*
	Multifaceted Lightbox
	by Greg Neustaetter - http://www.gregphoto.net
	
	INSPIRED BY (AND CODE TAKEN FROM)
	==================================
	The Lightbox Effect without Lightbox
	PJ Hyett
	http://pjhyett.com/articles/2006/02/09/the-lightbox-effect-without-lightbox
	

	Lightbox JS: Fullsize Image Overlays 
	by Lokesh Dhakar - http://www.huddletogether.com

	For more information on this script, visit:
	http://huddletogether.com/projects/lightbox/

	Licensend under:
	Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
	(basically, do anything you want, just leave my name and link)
	
*/

var Lightbox = {
	lightboxType : null,
	lightboxCurrentContentID : null,
	max_thumb_size : 100,
	min_thumb_size : 50,
	thumbs_margin : 20,
	nav_width : 190,
	scrollY_save : 0,
	currentGroup : null,
	currentIndex : 0,
	storeLength : 0,
	
	showBoxString : function(content, boxWidth, boxHeight){
		this.setLightboxDimensions(boxWidth, boxHeight);
		this.lightboxType = 'string';
		var contents = $('boxContents');
		contents.innerHTML = content;
		this.showBox();
		return false;
	},


	showBoxImage : function(href) {
		this.lightboxType = 'image';
		var contents = $('boxContents');
		var objImage = document.createElement("img");
		objImage.setAttribute('id','lightboxImage');
		contents.appendChild(objImage);
		imgPreload = new Image();
		imgPreload.onload=function(){
			objImage.src = href;
			Lightbox.showBox();
		}
		imgPreload.src = href;
		return false;
	},

	showBoxImageEx : function(group, index) {
		this.lightboxType = 'imageStore';
		this.currentGroup = group;
		this.currentIndex = Number(index);
		var selector = 'a[key="' + group + '"]';
		var images = $$(selector);
		var windowSize = this.getPageDimensions();		
		this.storeLength = images.length;
		var thumbSize = Math.max( this.min_thumb_size, Math.min( Math.round( (windowSize[0] - this.nav_width) / images.length ) - this.thumbs_margin, this.max_thumb_size ) );
		var contents = $('boxContents');
			contents.innerHTML = '';

		var lbx_div = document.createElement("div");
			lbx_div.setAttribute('class', 'lbx roundbox');
		var lbx_title = document.createElement("div");
			lbx_title.setAttribute('class', 'lbx_title');
		var _title = document.createElement("div");
			_title.setAttribute('id', 'lbx_title');
			_title.innerHTML = 'Скриншот "' + images[index].title + '"';
		var _close = document.createElement("div");
			_close.setAttribute('class', 'lbx_toppanbut lbx_closebut');
			this.set_elem_onclick( _close, function() { Lightbox.hideBox(); } );
		var _next = document.createElement("div");
			_next.setAttribute('class', 'lbx_toppanbut lbx_nextimg');
			this.set_elem_onclick( _next, function() { Lightbox.lbx_nextimg(); } );
		var _prev = document.createElement("div");
			_prev.setAttribute('class', 'lbx_toppanbut lbx_previmg');
			this.set_elem_onclick( _prev, function() { Lightbox.lbx_previmg(); } );
		var _curr = document.createElement("div");
			_curr.setAttribute('id', 'lbx_current');
		lbx_title.appendChild(_title);
		lbx_title.appendChild(_close);
		lbx_title.appendChild(_next);
		lbx_title.appendChild(_curr);
		lbx_title.appendChild(_prev);
		lbx_div.appendChild(lbx_title);
		
		var objImage = document.createElement("img");
			objImage.setAttribute('id', 'lightboxImage');
			objImage.setAttribute('class', 'lb_image');
			objImage.style.width = 'auto';
			objImage.style.height = 'auto';
			this.set_elem_onclick( objImage, function() {
					if(Lightbox.currentIndex + 1 >= Lightbox.storeLength) Lightbox.hideBox();
					else Lightbox.lbx_nextimg(); 
				}
			);
			objImage.src = images[index].href;
		lbx_div.appendChild(objImage);

		var lbx_store = document.createElement("div");
			lbx_store.setAttribute('class', 'lbx_store');
		_prev = document.createElement("div");
		_prev.setAttribute('class', 'lbx_navbut lbx_previmg');
		this.set_elem_style(_prev, 'height: ' + (thumbSize + this.thumbs_margin) + 'px;');
		this.set_elem_onclick( _prev, function() { Lightbox.lbx_previmg(); } );
		_next = document.createElement("div");
		_next.setAttribute('class', 'lbx_navbut lbx_nextimg');
		this.set_elem_style(_next, 'height: ' + (thumbSize + this.thumbs_margin) + 'px;');
		this.set_elem_onclick( _next, function() { Lightbox.lbx_nextimg(); } );
		lbx_store.appendChild(_prev);
		var cssText = '';
		images.each( function(val, ind) {
			var tmb = document.createElement("div");
				tmb.setAttribute('class', 'lbx_thumb');
			if (ind == index) tmb.setAttribute('id', 'current');
			var _tmb = document.createElement("div");
				_tmb.setAttribute('id', 'lbx_thumb' + ind);
				Lightbox.set_elem_style(_tmb, 'background-image: url(\'' + val.href + '\'); width: ' + thumbSize + 'px; height: ' + thumbSize + 'px;');
				Lightbox.set_elem_onclick( _tmb, 'var the_fun = function() { Lightbox.lbx_select(' + ind + ',"' + val.href + '"); }');
				_tmb.setAttribute('title', val.title);
				_tmb.setAttribute('src', val.href);
			var _caption = document.createElement("span");
				_caption.setAttribute('class', 'lbx_caption');
				Lightbox.set_elem_style(_caption, 'width: ' + thumbSize + 'px; word-wrap: break-word;');
				_caption.innerHTML = val.title;
			_tmb.appendChild(_caption);
			tmb.appendChild(_tmb);
			lbx_store.appendChild(tmb);
		});
		lbx_store.appendChild(_next);
		lbx_div.appendChild(lbx_store);
		contents.appendChild(lbx_div);
		this.lbx_tune();
		imgPreload = new Image();
		imgPreload.onload = function(){ Lightbox.showBox(); }
		imgPreload.src = objImage.src;
		return false;
	},
	lbx_tune : function()
	{
		var toHide = null;
		var toShow = null;
		if( this.currentIndex == 0 ) {
			toHide = $$('div.lbx_previmg');
			toShow = $$('div.lbx_nextimg');
		}
		else if( this.currentIndex == this.storeLength - 1 ) {
			toHide = $$('div.lbx_nextimg');
			toShow = $$('div.lbx_previmg');
		}
		else toShow = $$('div.lbx_nextimg', 'div.lbx_previmg');
		if( toHide != null ) toHide.each(function (val, ind) {
			val.style.visibility = 'hidden';
		});
		if( toShow != null ) toShow.each(function (val, ind) {
			val.style.visibility = 'visible';
		});
		$('lbx_current').innerHTML = (this.currentIndex + 1) + ' из ' + this.storeLength;
	},	
	lbx_nextimg : function()
	{
		var index = this.currentIndex + 1;
		if( index >= this.storeLength ) return;
		this.lbx_select(index);
	},	
	lbx_previmg : function()
	{
		var index = this.currentIndex - 1;
		if( index < 0) return;
		this.lbx_select(index);
	},
	lbx_select : function(index) {
		var val = $('lbx_thumb' + index);
		var src = val.getAttribute('src');
		$('lightboxImage').src = src;
		$('lbx_title').innerHTML = 'Скриншот "' + val.title + '"';
		$('lbx_thumb' + this.currentIndex).parentNode.removeAttribute('id');
		this.currentIndex = Number(index);
		val.parentNode.setAttribute('id', 'current');
		Lightbox.center('box', true);
		this.lbx_tune();
		imgPreload = new Image();
		imgPreload.onload = function() { Lightbox.center('box', true); }
		imgPreload.src = src;
	},

	showBoxByID : function(id, boxWidth, boxHeight) {
		this.lightboxType = 'id';
		this.lightboxCurrentContentID = id;
		this.setLightboxDimensions(boxWidth, boxHeight);
		var element = $(id);
		var contents = $('boxContents');
		contents.appendChild(element);
		Element.show(id);
		this.showBox();
		return false;
	},

	showBoxByAJAX : function(href, boxWidth, boxHeight) {
		this.lightboxType = 'ajax';
		this.setLightboxDimensions(boxWidth, boxHeight);
		var contents = $('boxContents');
		var myAjax = new Ajax.Updater(contents, href, {method: 'get', evalScripts: true});
		this.showBox();
		return false;
	},
	
	setLightboxDimensions : function(width, height) {
		var windowSize = this.getPageDimensions();
		if(width) {
			if(width < windowSize[0]) {
				$('box').style.width = width + 'px';
			} else {
				$('box').style.width = (windowSize[0] - 50) + 'px';
			}
		}
		if(height) {
			if(height < windowSize[1]) {
				$('box').style.height = height + 'px';
			} else {
				$('box').style.height = (windowSize[1] - 50) + 'px';
			}
		}
	},


	showBox : function() {
		Element.show('overlay');
		this.center('box');
		return false;
	},
	
	
	hideBox : function(){
		var contents = $('boxContents');
		if(this.lightboxType == 'id') {
			var body = document.getElementsByTagName("body").item(0);
			Element.hide(this.lightboxCurrentContentID);
			body.appendChild($(this.lightboxCurrentContentID));
		}
		contents.innerHTML = '';
		this.destroyChildren(contents);
		$('box').style.width = null;
		$('box').style.height = null;
		Element.hide('box');
		Element.hide('overlay');
		return false;
	},
	
	destroyChildren : function(node) { while (node.firstChild) node.removeChild(node.firstChild); },
	set_elem_style : function(obj, cssText) {
		obj.setAttribute('style', cssText);
		if (obj.style === null || obj.style === undefined) obj.style.setAttribute('cssText', cssText);
		else if(!obj.style.cssText) obj.style.setAttribute('cssText', cssText);
	},
	set_elem_onclick : function(obj, fun) {
		if(typeof(fun) === "string") {
			eval(fun);
			obj.onclick = the_fun;
		}
		else {
			obj.onclick = fun;
		}
	},
	
	// taken from lightbox js, modified argument return order
	getPageDimensions : function(){
		var xScroll, yScroll;
		if (window.innerHeight && window.scrollMaxY) {	
			xScroll = document.body.scrollWidth;
			yScroll = window.innerHeight + window.scrollMaxY;
		} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
			xScroll = document.body.scrollWidth;
			yScroll = document.body.scrollHeight;
		} else if (document.documentElement.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
			xScroll = document.documentElement.scrollWidth;
			yScroll = document.documentElement.scrollHeight;
		} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
			xScroll = document.body.offsetWidth;
			yScroll = document.body.offsetHeight;
		}
		
		var windowWidth, windowHeight;
		if (self.innerHeight) {	// all except Explorer
			windowWidth = self.innerWidth;
			windowHeight = self.innerHeight;
		} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
			windowWidth = document.documentElement.clientWidth;
			windowHeight = document.documentElement.clientHeight;
		} else if (document.body) { // other Explorers
			windowWidth = document.body.clientWidth;
			windowHeight = document.body.clientHeight;
		}	
		
		// for small pages with total height less then height of the viewport
		if(yScroll < windowHeight){
			pageHeight = windowHeight;
		} else { 
			pageHeight = yScroll;
		}
	
		// for small pages with total width less then width of the viewport
		if(xScroll < windowWidth){	
			pageWidth = windowWidth;
		} else {
			pageWidth = xScroll;
		}
		arrayPageSize = new Array(windowWidth,windowHeight,pageWidth,pageHeight) 
		return arrayPageSize;
	},
	
	center : function(element, scrolling){
		try{
			element = document.getElementById(element);
		}catch(e){
			return;
		}
		var windowSize = this.getPageDimensions();
		var window_width  = windowSize[0];
		var window_height = windowSize[1];
		
		$('overlay').style.height = windowSize[3] + 'px';
		
		element.style.position = 'absolute';
		element.style.zIndex   = 99;
	
		var scrollY = this.scrollY_save;
		if(scrolling == undefined) {
			if ( document.documentElement && document.documentElement.scrollTop ){
				scrollY = document.documentElement.scrollTop;
			}else if ( document.body && document.body.scrollTop ){
				scrollY = document.body.scrollTop;
			}else if ( window.pageYOffset ){
				scrollY = window.pageYOffset;
			}else if ( window.scrollY ){
				scrollY = window.scrollY;
			}
			this.scrollY_save = scrollY;
		}
		var elementDimensions = Element.getDimensions(element);
		var setX = ( window_width  - elementDimensions.width  ) / 2;
		var setY = ( window_height - elementDimensions.height ) / 2 + scrollY;
	
		setX = ( setX < 0 ) ? 0 : setX;
		setY = ( setY < 0 ) ? 0 : setY;
	
		element.style.left = setX + "px";
		element.style.top  = setY + "px";
		Element.show(element);
	},
	
	init : function() {				  
		var lightboxtext = '<div id="overlay" style="display:none" onclick="Lightbox.hideBox();"></div>';
		lightboxtext += '<div id="box" style="display:none">';
		//lightboxtext += '<img id="close" src="close.gif" onClick="Lightbox.hideBox()" alt="Close" title="Close this window" />';
		lightboxtext += '<div id="boxContents"></div>';
		lightboxtext += '</div>';
		var body = document.getElementsByTagName("body").item(0);
		new Insertion.Bottom(body, lightboxtext);
	}
}
