Event.observe(window, 'load', lightbox_initialize, false);

var lightbox = {

	yPos : 0,

	// Turn everything on - mainly the IE fixes
	activate: function(){
		this.setScroll(0,0);
		if (this.is_msie){
			this.getScroll();
			this.prepareIE('100%', 'hidden');
			this.hideSelects('hidden');
		}
		this.displayLightbox("block");
	},

	show: function(id){
		var detect = navigator.userAgent.toLowerCase();
		this.is_msie = detect.indexOf("msie") + 1;
		
		this.pageid = id;
		this.setContents(pages[id]);
		this.activate(false);
	},

	showgal: function(id,page){
		var detect = navigator.userAgent.toLowerCase();
		this.is_msie = 0;//;detect.indexOf("msie") + 1;

		this.imgid = id;
		this.imgpage = page;
		this.setContentsGal(images[page][id]);
		this.activate(false);
	},

	hideFlash: function(w){
		$$("object").each( function(s) { s.style.visibility = w; } );
		$$("embed").each( function(s) { s.style.visibility = w; } );
	},

	// Ie requires height to 100% and overflow hidden or else you can scroll down past the lightbox
	prepareIE: function(height, overflow){
		// prototype's setStyle doesnt work here, nor needs to
		bod = document.getElementsByTagName('body')[0];
		bod.style.height = height;
		bod.style.overflow = overflow;
		htm = document.getElementsByTagName('html')[0];
		htm.style.height = height;
		htm.style.overflow = overflow; 
	},

	// In IE, select elements hover on top of the lightbox
	hideSelects: function(visibility){
		$$("select").each( function(s) { s.style.visibility = visibility; } );
	},

	// Taken from lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
	getScroll: function(){
		if (self.pageYOffset) {
			this.yPos = self.pageYOffset;
		} else if (document.documentElement && document.documentElement.scrollTop){
			this.yPos = document.documentElement.scrollTop; 
		} else if (document.body) {
			this.yPos = document.body.scrollTop;
		}
	},

	setScroll: function(x, y){
		window.scrollTo(x, y); 
	},

	displayLightbox: function(display){
		this.hideFlash("hidden");
		$('overlay').style.display = display;
		$('lightbox').style.display = display;
	},

	setContents: function(contents){

		contents = this.prepareDesign(contents);

		var lb = $('lightbox');
		lb.setStyle( { width: 'auto', overflow: 'auto' } );

		var lbc = $('lbContent');
		lbc.update(contents);

		var size = lbc.getDimensions();
		lb.setStyle( { width: "654px" } );
		size = lbc.getDimensions();
		if (size.height>500) {
			lb.setStyle( { width: (size.width+30)+'px' } );
			size.height = 500;
			lbc.setStyle( { height: "500px", overflow: "scroll" } );
		}

		lb.setStyle( { margin: "-"+(size.height/2)+"px 0 0 -327px" } );

		lb.className = "done";
		this.actions();
	},

	setContentsGal: function(contents){

		contents = '<div class="galbox"><div class="first">'+ ((images[this.imgpage][this.imgid-1]) ? '<a href="javascript:void(0);" onclick="lightbox.showgal(' + (this.imgid-1) + ',' + this.imgpage + ')" class="gbpagin"></a>' : '<div class="none"></div>') + '</div><div class="second"><div class="top"></div><div class="contents"><div class="liner"><span class="fr"><a href="http://www.facebook.com/sharer.php?u='+escape(contents)+'"></a><a href="http://twitter.com/?status='+escape(contents)+'" class="tw"></a></span><span class="se">&laquo; Posreduj sliko</span><span class="tr">Glasuj za sliko &raquo;</span><span class="fo"><iframe src="http://www.facebook.com/plugins/like.php?href='+escape(contents)+'&amp;layout=button_count&amp;show-faces=false&amp;width=67&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true"></iframe></span><div class="clear"></div></div><div class="conimg"align="center"><a href="javascript:void(0);" onclick="lightbox.close();"><img src="' + contents + '" /></a></div></div><div class="bottom"></div></div><div class="third"><a href="javascript:void(0);" onclick="lightbox.close();" class="closegal"></a>' + ((images[this.imgpage][this.imgid++] && this.imgid<countimg[this.imgpage]) ? '<a href="javascript:void(0);" onclick="lightbox.showgal(' + (this.imgid++) + ',' + this.imgpage + ')" class="gbpagin gbpaginr"></a>' : '<div class="none"></div>') + '</div><div class="clear"></div></div>';

		var lb = $('lightbox');
		lb.setStyle( { width: 'auto' } );

		var lbc = $('lbContent');
		lbc.update(contents);

		var size = lbc.getDimensions();
		size = lbc.getDimensions();
		lb.setStyle( { margin: "0 0 0 -537px" } );

		lb.className = "done";
		this.actions();
	},

	// Search through new links within the lightbox, and attach click event
	actions: function(){
		var lbActions = $$(".lbAction");
		lbActions.each(
			(function(e) {
				e.observe('click', this[e.rel].bind(this));
			}).bind(this)
		);
	},
	// Example of creating your own functionality once lightbox is initiated
	close: function(){
		$('lbContent').update("");
		if (this.is_msie){
			this.setScroll(0,this.yPos);
			this.prepareIE("auto", "auto");
			this.hideSelects("visible");
		}
		this.displayLightbox("none");
		this.hideFlash("visible");
	},
	
	prepareDesign: function(contents)
	{
	    return '<div class="side">' + ((pages[this.pageid-1]) ? '<a href="javascript:void(0);" onclick="lightbox.show(' + (this.pageid-1) + ')" class="pagin"></a>' : '<div class="none"></div>') + '</div><div class="carton" style="float:left;width:456px;"><img src="' + contents[0] + '" /><div class="carton_cont" style="min-height:0;"><div class="wrapper"><div class="sconp">' + contents[1] + '</div></div></div><div class="carton_bot">&nbsp;</div></div><div class="side"><a href="javascript:void(0);" onclick="lightbox.close();" class="close"></a>' + ((pages[this.pageid++] && this.pageid<3) ? '<a href="javascript:void(0);" onclick="lightbox.show(' + (this.pageid++) + ')" class="pagin paginr"></a>' : '<div class="none"></div>') + '</div>';
	}
}

function lightbox_initialize(){
	var bod = document.getElementsByTagName('body')[0];

	var overlay = document.createElement('div');
	overlay.id = 'overlay';

	var lb = document.createElement('div');

	Element.extend(lb);

	lb.id = 'lightbox';
	lb.className = 'loading';
	// lb.update fails, prototype fail
	lb.update('<div id="lbContent"></div><div id="lbLoadMessage"><p>Nalagam ..</p></div>');

	bod.appendChild(overlay);
	bod.appendChild(lb);
}