/*

	Shows images in Glow lightbox. Includes navigation buttons within lightbox.

	Assumes title is in an element selected by 

		#blq-local-nav .navCrumb .subSelected

	and links are selected by

		#resources-photos .tn a

	Relies on CSS.

	Author: <a href="mailto:Michael.Taylor1@bbc.co.uk">Mike Taylor</a> 2008-11-13
*/

function ImageLightbox(args) {

	this.width_add_px = 48; // add this to avoid scrollbars in IE6
	this.panel = null; // Glow panel - only need one of these
	this.dbg = false;

	this.title_text = args['title'] || 'Images';

	// create arrays to store specs and panel bodies
	this.ns_links = glow.dom.get(args['image-links']);
	this.n_items = this.ns_links.length; // total items in lightbox list
	this.a_spec = new Array(this.n_items); // store spec for each lightbox
	this.a_ns_body = new Array(this.n_items); // store each panel body

	if (this.dbg)
		alert("Found " + this.n_items + " lightbox items");

	this.init();
}
//-----

ImageLightbox.prototype.init = function() {

// MAINTAINED VARIABLES:

	var that = this;

	// add listeners first, but don't create bodies until needed.
	this.ns_links.each(function(i) {

		var ns_link = that.ns_links.slice(i,i+1);

		glow.events.addListener(ns_link, "click", function() { show_image(i); return false; });

		if (that.dbg) alert('listener added to link: ' + ns_link.attr('href'));
		if (that.dbg) alert('title for that link is: ' + ns_link.attr('title'));

	});
	

// INNER FUNCTIONS:

	function add_close_text(panel) {

		var ns_close = glow.dom.create('<span class="close-text"><a href="#">Close</a></span>');
		// myPanel.hide();
		glow.events.addListener(ns_close, "click", function() { panel.hide(); return false; });

		panel.content.get("a.panel-close").addClass("close-btn");
		panel.content.get("a.panel-close").after(ns_close);
	}
	//-----

	// create a body with image to be displayed in the panel
	function add_panel_body(i, fn_callback) {

		var ns_img = glow.dom.create('<img />')
			, ns_link = that.ns_links.slice(i,i+1)
			;

		if (that.a_spec[i]) // already created or being created
			return;

		that.a_spec[i] = {};
		that.a_spec[i]['title'] = ns_link.attr("title");
		that.a_spec[i]['url'] = ns_link.attr("href");
		that.a_spec[i]['caption'] = ns_link.get("img").attr("alt");

		if (that.dbg) alert('Link: ' + that.a_spec[i]["url"]);

		// when image is loaded, carry on
		glow.events.addListener(ns_img, "load", function() { add_panel_body_end(ns_link, this, i, fn_callback) }, ns_img);

		ns_img.attr("src", that.a_spec[i]["url"]);

	}
	//-----

	// complete the body once we have loaded the image and can find its size
	function add_panel_body_end(ns_link, ns_img, i, fn_callback) {

//		if (that.dbg) alert('Node Name: '+ ns_img[0].nodeName);		

		var ns_panel_body = glow.dom.create('<div class="image-panel"></div>')
			;

		// get the image size
		glow.dom.get(document.body).append(ns_img);
		width_px = ns_img.width();
		height_px = ns_img.height();

		ns_img.attr("width", width_px)
			.attr("height", height_px)
			;

		ns_panel_body.append(ns_img);
		ns_panel_body.append(glow.dom.create(
				'<p>' + that.a_spec[i]["caption"] + '</p>'
			)
			.css('width', width_px + 'px')
			);

		that.a_spec[i]['width'] = width_px;
		that.a_ns_body[i] = ns_panel_body;

		fn_callback();
	}
	//-----

	// create the lightbox spec, then add listeners for internal nav buttons
	function create_panel() {

		var panel // Glow panel
			, ns_panel_base = glow.dom.create(
			  '<div class="image-panel">'
				// + '<h2 class="hd">' + that.title_text + '</h2>'
				+ '<h2 class="hd"></h2>'
				+ '<p class="ft">'
					+ '<a class="prev" href="#">Previous</a>'
					+ '<a class="next" href="#">Next</a>'
				+ '</p>'
			+ '</div>'
		); 

		panel = new glow.widgets.Panel(ns_panel_base, {
			"closeOnMaskClick": false
			, 'anim': 'fade'
		});

		panel.container.addClass("ph-panel-container");
		panel.body.addClass("ph-panel-body");
		add_close_text(panel);

		// add navigation from within lightbox
		glow.events.addListener(panel.footer.get('a.prev'), 'click', function() { 
			image_change(this['ph-index'] - 1);
			return false;
			}, 
			panel);

		glow.events.addListener(panel.footer.get('a.next'), 'click', function() { 
			image_change(this['ph-index'] + 1);
			return false;
			}, 
			panel);


		return panel;
	}
	//-----

	// set image when panel is already showing one
	// can't assume the body has been loaded.
	function image_change(i) {

		if (i < 0 || i >= that.n_items || that.panel['ph-index'] == i) 
			return;

		if (that.a_ns_body[i])
			image_change_end(i);
		else 
			add_panel_body(i, function() { image_change_end(i) });
	}
	//-----

	// complete setting image once body has been loaded.
	function image_change_end(i) {

		//that.a_ns_body[i]
	
		that.panel.body.get('.image-panel').replaceWith(that.a_ns_body[i]);
		that.panel.header.get('.hd').html(that.a_spec[i]['title']);
		that.panel.container.width((that.a_spec[i]['width'] + that.width_add_px) + 'px');
		that.panel.setPosition();

		that.panel['ph-index'] = i;
		set_buttons(i);
	}
	//-----

	// set image when panel has just been created
	function image_set(i) {

		that.panel.body.get('.image-panel').replaceWith(that.a_ns_body[i]);
		//that.panel.body.get('.hd').html(that.a_spec[i]['title']);
		//alert('the title: ' + that.a_spec[i]['title']);
		that.panel.header.get('.hd').html(that.a_spec[i]['title']);
		that.panel.container.width((that.a_spec[i]['width'] + that.width_add_px) + 'px');
		that.panel['ph-index'] = i; // record the current image in the lightbox
		set_buttons(i);
	}
	//-----

	// enable/disable buttons
	function set_buttons(i) {

		var ns_footer = that.panel.footer;

		ns_footer.get('a.next').removeClass('no-next');
		ns_footer.get('a.prev').removeClass('no-prev');

		if (i == 0) {
			ns_footer.get('a.prev').addClass('no-prev');
		}
		else if (i == that.n_items - 1) {
			ns_footer.get('a.next').addClass('no-next');
		}
	}
	//-----

	// show chosen image. Body may not exist, and Panel may not exist.
	function show_image(i) {

		// if body doesn't exist, create it. Need to use callback because of waiting
		// for image to load.

		if (that.a_ns_body[i])
			show_image_end(i);
		else 
			add_panel_body(i, function() { show_image_end(i) });

		return false;
	}
	//-----

	// show chosen image once we know the body to be displayed exists.
	function show_image_end(i) {

		if (!that.panel) {
			that.panel = create_panel();
			image_set(i);
		}
		else {
			image_change(i);
		}

		that.panel.show();

		return false;
	}
	//-----

}
//-----

// end of script