/**
* cdmm image gallery
* ------------------
* script requirements:
* dojo framework, centerImage() function
* ------------------
* markup requirements: 
* box containing gallery image, id <gallery name>_image
* - a-tag containing an img-tag
* box containing thumbnails, id <gallery name>_thumbnails,
* each thumbnails sub tree:
* - a-tag, base_src uri to image file without dimensions
* - img-tag
* ------------------
* parameter:
* - gallery_name
* - style_suffix, default = gallery_name
* - default_image, default = 0
* ------------------
* generated style classes:
* next-link: next_link_<style suffix>
* prev-link: previous_link_<style suffix>
* active thumbnail top node: active
*/
function cdmmImageGallery(gallery_name, style_suffix, default_image) {
	// initialize container objects
	this.image = new Object();
	this.thumbnails = new Object();
	this.thumbnails.elements = new Array();
	// store parameter
	this.image.id = gallery_name + '_image';
	this.thumbnails.id = gallery_name + '_thumbnails';
	if(default_image != null) {
		this.thumbnails.active = default_image;
	} else {
		this.thumbnails.active = 0;
	}
	this.thumbnails.next_active = 0;
	if(style_suffix != null) {
		this.style_suffix = style_suffix;
	} else {
		this.style_suffix = gallery_name;
	}
	
	// store status of hover
	this.image.is_hovered = false;
	
	// store gallery image size
	this.image.width = dojo.marginBox(dojo.byId(this.image.id)).w;
	this.image.height = dojo.marginBox(dojo.byId(this.image.id)).h;
	
	// get actual displayed image, hide and store it
	this.image.element = dojo.query('img', this.image.id)[0];
	dojo.fadeOut({ node: this.image.element, duration: 1 }).play();
	
	// get displayed image link and put it to the foreground
	this.image.anchor_node = dojo.query('a', this.image.id)[0];
	
	// create loading image and put it to the background
	this.loading_image = dojo.create( 'div', null, dojo.byId(this.image.id));
	dojo.addClass(this.loading_image, 'loading_image');
	centerElement(this.loading_image);
	
	/**
	* get and store thumbnails
	* 1. get top nodes for each thumbnails sub tree in temp var
	* 2. loop to store objects
	* 2.1. create thumbnail container element
	* 2.2. store top node
	* 2.3. store image node
	* 2.4. store anchor node
	* 2.5. add index var to anchor for event handling
	* 3. unset temp var
	*/
	this.tempElements = dojo.query('>', this.thumbnails.id);
	for (var i = 0; i < this.tempElements.length; i++) {
		this.thumbnails.elements[i] = new Object();
		this.thumbnails.elements[i].top_node = this.tempElements[i];
		this.thumbnails.elements[i].image_node = dojo.query('img', this.tempElements[i])[0];
		this.thumbnails.elements[i].anchor_node = dojo.query('a', this.tempElements[i])[0];
		dojo.attr(this.thumbnails.elements[i].anchor_node, 'index', i);
	}
	this.tempElements = null;
	
	// create previous image link
	this.prev_link = dojo.create('div', { className: 'previous_link_' + this.style_suffix }, dojo.byId(this.image.id));
	this.prev_link.assignIndex = dojo.hitch(this, function() {
		if(this.thumbnails.active > 0) {
			dojo.attr(this.prev_link, 'index', this.thumbnails.active-1);
		} else {
			dojo.attr(this.prev_link, 'index', 0);
		}
	});
	
	// create next image link
	this.next_link = dojo.create('div', { className: 'next_link_' + this.style_suffix }, dojo.byId(this.image.id));
	this.next_link.assignIndex = dojo.hitch(this, function() {
		if(this.thumbnails.active < this.thumbnails.elements.length) {
			dojo.attr(this.next_link, 'index', parseInt(this.thumbnails.active)+1);
		} else {
			dojo.attr(this.next_link, 'index', this.thumbnails.elements.length-1);
		}
	});
	
	/**
	* function to switch image src
	*/
	this.image.switchTo = dojo.hitch(this, function(args) {
		dojo.attr(this.image.element, 'src', dojo.attr(this.thumbnails.elements[this.thumbnails.next_active].anchor_node, 'base_src') + '/' + this.image.width + '/' + this.image.height);
		dojo.attr(this.image.anchor_node, 'href', dojo.attr(this.thumbnails.elements[this.thumbnails.next_active].anchor_node, 'base_src'));
		dojo.attr(this.image.element, 'alt', dojo.attr(this.thumbnails.elements[this.thumbnails.next_active].image_node, 'alt'));
		dojo.attr(this.image.element, 'title', dojo.attr(this.thumbnails.elements[this.thumbnails.next_active].image_node, 'title'));
		dojo.removeClass(this.thumbnails.elements[this.thumbnails.active].top_node, 'active');
		this.thumbnails.active = this.thumbnails.next_active;
		dojo.addClass(this.thumbnails.elements[this.thumbnails.active].top_node, 'active');
	});
	/**
	* function to switch prev / next links display
	*/
	this.displayNextPrevLinks = dojo.hitch(this, function() {
		if (this.thumbnails.active > 0 && this.is_hovered == true) {
			dojo.style(this.prev_link, 'display', 'block');
		} else {
			dojo.style(this.prev_link, 'display', 'none');
		}
		if (this.thumbnails.active < this.thumbnails.elements.length-1 && this.is_hovered == true) {
			dojo.style(this.next_link, 'display', 'block');
		} else {
			dojo.style(this.next_link, 'display', 'none');
		}
	});
	this.hideNextPrevLinks = dojo.hitch(this, function() {
		dojo.style(this.prev_link, 'display', 'none');
		dojo.style(this.next_link, 'display', 'none');
	});
	
	/**
	* create fade in / out animations
	* 1. displayed image fade in
	* 2. loading image fade in
	* 3. displayed image fade out
	* 4. loading image fade out
	*/
	this.image.element.fade_in = dojo.fadeIn({ node: this.image.element, duration: 300 });
	this.loading_image.fade_in = dojo.fadeIn({ node: this.loading_image, duration: 100 });
	this.image.element.fade_out = dojo.fadeOut({ node: this.image.element, duration: 300, onEnd: dojo.hitch(this, function() {
		this.loading_image.fade_out.stop();
		this.image.switchTo();
		dojo.style(this.loading_image, 'visibility', 'visible');
		this.loading_image.fade_in.play();
	})});
	this.loading_image.fade_out = dojo.fadeOut({ node: this.loading_image, duration: 100, onEnd: dojo.hitch(this, function() {
		dojo.style(this.loading_image, 'visibility', 'hidden');
		this.image.element.fade_out.stop();
		this.image.element.fade_in.play();
	})});
	
	/**
	* add onclick event handler to prev / next links
	*/
	dojo.connect(this.prev_link, 'onclick', dojo.hitch(this, function(args) {
		this.thumbnails.next_active = dojo.attr(args.currentTarget, 'index');
		this.image.element.fade_in.stop();
		this.image.element.fade_out.play();
	}));
	dojo.connect(this.next_link, 'onclick', dojo.hitch(this, function(args) {
		this.thumbnails.next_active = dojo.attr(args.currentTarget, 'index');
		this.image.element.fade_in.stop();
		this.image.element.fade_out.play();
	}));

	/**
	* add onload event handler to gallery image
	*/
	dojo.connect( this.image.element, 'onload', dojo.hitch(this, function(args) {
		centerElement(args);
		this.prev_link.assignIndex();
		this.next_link.assignIndex();
		this.displayNextPrevLinks();
		this.loading_image.fade_in.stop();
		this.loading_image.fade_out.play();
	}));
	
	/**
	* add onload and onclick event handler to thumbnails images / anchors
	*/
	for (var i = 0; i < this.thumbnails.elements.length; i++) {
		centerElement(this.thumbnails.elements[i].image_node);
		dojo.connect(this.thumbnails.elements[i].image_node, 'onload', centerElement);
		dojo.connect(this.thumbnails.elements[i].anchor_node, 'onclick', dojo.hitch(this, function(args) {
			args.preventDefault();
			if (dojo.attr(args.currentTarget, 'index') != this.thumbnails.active) {
				this.thumbnails.next_active = dojo.attr(args.currentTarget, 'index');
				this.image.element.fade_in.stop();
				this.image.element.fade_out.play();
			}
		}));
	}
	
	/**
	* add onmouseover and onmouseout event handler to image
	*/
	dojo.connect(dojo.byId(this.image.id), 'onmouseover', dojo.hitch(this, function() {
		this.is_hovered = true;
		this.displayNextPrevLinks();
	}));
	dojo.connect(dojo.byId(this.image.id), 'onmouseout', dojo.hitch(this, function() {
		this.is_hovered = false;
		this.hideNextPrevLinks();
	}));
	
	// display active thumbnail as gallery image
	dojo.attr(this.image.element, 'src', dojo.attr(this.thumbnails.elements[this.thumbnails.active].anchor_node, 'base_src') + '/' + this.image.width + '/' + this.image.height);
	dojo.attr(this.image.element, 'alt', dojo.attr(this.thumbnails.elements[this.thumbnails.next_active].image_node, 'alt'));
	dojo.attr(this.image.element, 'title', dojo.attr(this.thumbnails.elements[this.thumbnails.next_active].image_node, 'title'));
	dojo.addClass(this.thumbnails.elements[this.thumbnails.active].top_node, 'active');
}