/******************************************
 * The Image Gallery Class
 *
 * Adds an image-changer/gallery to the page.
 ******************************************/

if (typeof crumbs == "undefined" || !crumbs) {
    var crumbs = {};
}

crumbs.Gallery = Class.create({
	/**
	 * Constructor
	 *
	 * @param string outerContainerId: the id of the gallery's html container
	 */
	initialize: function(outerContainerId) {
		this.outerContainer = $(outerContainerId);
		this.container = null;
		this.width = 519,
		this.height = 275,
		this.items = new Array();
		this.swfs = new Array();
	},

	/**
	 * Adds an image to the gallery
	 *
	 * @param string imageUrl: the url path of the image
	 */
	addImage: function (imageUrl) {
		var img = document.createElement("img");
		img = $(img);
		img.addClassName("gallery-image");
		img.src = imageUrl;
		img.alt = "";
		this.items.push(img);
	},

	/**
	 * Adds an swf movie to the gallery
	 *
	 * @param string swfUrl: the url path of the image
	 * @param hash options: array of options. 
	 *						Required: name, width, height, bgColor
	 *						Optional: params, variables
	 */
	addSwf: function (swfUrl, options) {
		var swf = new SWFObject(swfUrl, options.name, options.width, options.height, "8", options.bgColor);
		if (options.params) {
			for (var i in options.params) {
				swf.addParam(i, options.params[i]);
			}
		}
		if (options.variables) {
			for (var j in options.variables) {
				swf.addVariable(j, options.variables[j]);
			}
		}
		var div = $(document.createElement("div"));
		div.addClassName("gallery-swf");
		this.items.push(div);
		this.swfs.push({id: div.identify(), swf: swf});

		if (options.width > this.width || options.height > this.height) {
			var maxW = options.width > this.width ? options.width : this.width;
			var maxH = options.height > this.height ? options.height : this.height;
			this.setDimensions(maxW, maxH);
		}
		//console.log("w: " + this.width + ", h: " + this.height);
	},

	/**
	 * Sets the maximum dimenions of the items.
	 *
	 * @param int width
	 * @param int height
	 */
	setDimensions: function (width, height) {
		this.width = width;
		this.height = height;
	},	
	setImageDimensions: function (width, height) {
		this.setDimensions(width, height);
	},

	/**
	 * Renders the gallery on the page
	 */
	render: function () {
		this._createContainer();
		this._createItems();
		this.outerContainer.appendChild(this.container);
		this._createNav();
		this._createSwfs();
	},

	_createContainer: function () {
		this.container = $(document.createElement("div"));
		this.container.addClassName("gallery-container");
		this.container.setStyle({width: this.width + "px",
							   maxHeight: this.height + "px",
							   overflow: 'hidden'});
		this.outerContainer.setStyle({overflow: 'hidden'});
	},

	_createItems: function () {
		for (var i = 0; i < this.items.length; i++) {
			if (i > 0) {
				if (this.items[i].hasClassName("gallery-image")) 
					this.items[i].addClassName("hidden");
				else
					this.items[i].addClassName("swf-hidden");
			}
			this.items[i].num = (i+1).toString();
			this.container.appendChild(this.items[i]);
		}
	},

	_createSwfs: function () {
		for (var i = 0; i < this.swfs.length; i++) {
			var obj = this.swfs[i];
			obj.swf.write(obj.id);
		}
	},

	_createNav: function () {
		if (this.items.length > 1) { 
			var ul = document.createElement("ul");
			ul = $(ul);
			ul.addClassName("gallery-changers");

			for (var i = 0; i < this.items.length; i++) {
				var li = document.createElement("li");
				var a = document.createElement("a");
				a = $(a);
				a.innerHTML = (i+1).toString();
				a.num = (i+1).toString();
				a.addClassName("gallery-changer");
				if (i == 0) 
					a.addClassName("current");
				Event.observe(a, "click", this._changeGalleryImage);

				li.appendChild(a);
				ul.appendChild(li);
			}
			this.outerContainer.appendChild(ul);
		}
	},

	_changeGalleryImage: function (event) {
		var images = $$(".gallery-image");
		for (var i = 0; i < images.length; i++) {
			if (images[i].num == this.num) 
				images[i].removeClassName("hidden");
			else
				images[i].addClassName("hidden");
		}

		var swfs = $$(".gallery-swf");
		for (var i = 0; i < swfs.length; i++) {
			if (swfs[i].num == this.num) 
				swfs[i].removeClassName("swf-hidden");
			else
				swfs[i].addClassName("swf-hidden");
		}

		var as = $$(".gallery-changer");
		for (var i = 0; i < as.length; i++) {
			if (as[i].num == this.num)
				as[i].addClassName("current");
			else
				as[i].removeClassName("current");
		}
	}
});