var gallery;
var	imagefx = null;

function load_json_gallery(jsonurl) {	
		var json_ajax = new Ajax(jsonurl, {
			method: 'get',							
			onComplete: function(response) {
				gallery = Json.evaluate(response);
			}
	}).request();
}

function thumblist_imagelinks() {
	$$('.thimbs').removeEvent('click');	
	$$('.thumbs').addEvent('click', function(e){
	
		pre_show_image(e);
		
		var imagepath = this.href.substr(this.href.lastIndexOf("IMG/gallery"));			
		
		new Asset.image(imagepath, {id: 'asset', title: '', onload: function() {											
			show_image(this);			
		}});					
		
	});	

	
	var myTips = new Tips($$('.txTip'), {
    'maxTitleChars': 1024,
    'fixed': false
 	});	 	
 	
}

function pre_show_image(e) {
	new Event(e).stop();
		
	$('overlay').style.display = 'block';
	$('load').style.display = 'block';
	
	$('image').style.visibility = "hidden";
	$('image').style.display = "block";
	$('image').style.opacity = 0;
}

function hide_image() {
	$('image').style.display = 'none';
	$('image').innerHTML = "";
	$('load').style.display = "none";	
	$('overlay').style.display = 'none';		
}

function show_image(img) {
	if (imagefx == null) {
		imagefx = $('image').effect('opacity', {duration: 500});
	}

	$('image').empty();
	$('image').adopt(img);
			
	// Commands->
	var commands = new Element("div", {
		"id":"closenextprev",
		"styles":{
			"margin-top":(img.getCoordinates().height/2+13)*-1+'px',
			"margin-left":(img.getCoordinates().width/2+13)*-1+'px'
		}
	});
	
	var com_close = new Element("img", {
		"src":"IMG/closebox.png",
		"alt":"X",
		"width":30,
		"height":30,
		"id":"image_close", 
		"events":{
			"click":function(e){
				hide_image();
			}
		}
	});
	
	this.addEvent("click", hide_image);

	var title = null;
	var prev = null;
	var next = null;
	gallery.each(function(item,index) {
		if (URLDecode(img.src).contains(item.url)) {
			title = item.title;
			if (gallery[index-1] != null)
				prev = gallery[index-1].url;
			if (gallery[index+1] != null)
				next = gallery[index+1].url;
		}
	});
	
	commands.adopt(com_close);
	
	if (prev != null) {
		var com_prev = new Element("img", {
			"src":"IMG/prev.png",
			"alt":"<",
			"width":30,
			"height":30,
			"id":"image_prev",
			"events":{
				"click":function(e) {
					pre_show_image(e);
					var imagepath = prev;			
					new Asset.image(imagepath, {id: 'asset', title: '', onload: function() {											
						show_image(this);
					}});
				}
			}
		});		
		commands.adopt(com_prev);			
	}

	if (next != null) {
		var com_next = new Element("img", {
			"src":"IMG/next.png",
			"alt":"<",
			"width":30,
			"height":30,
			"id":"image_next",
			"events":{
				"click":function(e) {
					pre_show_image(e);
					var imagepath = next;			
					new Asset.image(imagepath, {id: 'asset', title: '', onload: function() {											
						show_image(this);
					}});
				}
			}
		});		
		commands.adopt(com_next);			
	}	
	// <-Commands 
		
	img.setStyles({
		"margin-top":img.getCoordinates().height/2*-1+'px',
		"margin-left":img.getCoordinates().width/2*-1+'px',
		"width":img.getCoordinates().width+'px',
		"height":img.getCoordinates().height+'px'
	});
	img.setProperty("class","bordered");
	
	$('image').adopt(commands);
	$('image').adopt(img);			
		
	if (title != null && title != '') {
		var title_div = new Element("div", {
			"class":"pa-tx",
			"styles":{
				"margin-left":img.getCoordinates().width/2*-1+8+'px',
				"width":img.getCoordinates().width-18+'px'	// -8 (border) -10 (padding-left+padding-right)
			}
		});
		
		var titleHTML = '<table width=100%><tr><td valign=top width=50%><b>Name</b>: '+title.name+'<br/><b>Photographer</b>: '+title.photographer+'<br/><b>Date</b>: '+title.date+'</td><td valign=top width=50%><b>Hair/Make Up/Stylist</b>: '+title.hms+'<br/><b>Copyright:</b> '+title.copyright+'<br/></td></tr></table>';

		
		title_div.setHTML(titleHTML);
		$('image').adopt(title_div);		
	}
	
	$('load').style.display = 'none';
	imagefx.start(1).chain(pa_imagelinks());
}

window.addEvent('keydown', function(event){
		event = new Event(event);
		if (event.key == 'esc') {
			hide_image();
		}
});