/*
Copyright (c) 2006, Caridy Patiņo (caridy@gmail.com). All rights reserved.
Code licensed under the BSD License:
Version 0.1
*/

/**
* @class
* Gallery is an implementation of Images Gallery.
* @param {string}	el	The element ID representing the Gallery <ul>Gallery</ul>
* @param {Element}	el	The element representing the Gallery
* @param {object}	userConfig	The configuration object literal containing the configuration that should be set for this Gallery. See configuration documentation for more details.
* @constructor
*/

YAHOO.widget.Gallery = function(p_oElement, p_oConfig) {
    this.init(p_oElement, p_oConfig);
};

YAHOO.widget.Gallery.prototype = {

	imageRoot                  : "/jscripts/yui/caridy/assets/",
	NEXT_BUTTON_IMAGE_PATH     : "n.jpg",
	NEXT_BUTTON_IMAGE_ALT      : "Next",
	PREVIOUS_BUTTON_IMAGE_PATH : "p.jpg",
	PREVIOUS_BUTTON_IMAGE_ALT  : "Previous",
	CSS_GALLERY    			   : "gallery",
	
	container     : null,
	aListElements : new Array(),
	aElement      : 0,
	hidedelay	  : 5000,
	hideProcId	  : null,
	
	/**
	* The Gallery initialization method. This method is automatically called by the constructor. A GAllery is automatically rendered by the init method, and it also is set to be invisible by default, and constrained to viewport by default as well.
	* @param {string}	el	The element ID representing the Gallery <em>OR</em>
	* @param {Element}	el	The element representing the Gallery
	* @param {object}	userConfig	The configuration object literal containing the configuration that should be set for this Gallery. See configuration documentation for more details.
	*/
	init: function(el, userConfig) {
		this.container = userConfig.container;
		this.aListElements = [];
		if (typeof this.container == 'string') {
		  var el = document.getElementById(this.container);
		  YAHOO.util.Dom.addClass(el, this.CSS_GALLERY);
	
		  var none = function(e){ YAHOO.util.Event.stopEvent(e); }
		  var items = el.getElementsByTagName("a");
		  for (var i=0; i<items.length; i++) {
			YAHOO.util.Event.addListener ( items[i], 'click', none );
			if (this.isImage(items[i].href)) {
			  var oImg = document.createElement("img");
				  oImg.src = items[i].href;
			  items[i].innerHTML = (i+1) + '. ' + items[i].title + '<br />';  
			  items[i].appendChild(oImg);
			  this.aListElements[this.aListElements.length] = YAHOO.util.Event.generateId (items[i]);
	  		  YAHOO.util.Dom.setStyle(YAHOO.util.Event.generateId (items[i]), 'display', 'none');
		      YAHOO.util.Dom.setStyle(oImg, 'margin', '4px');
			}
		  }
		  
		  var obj = this;
		  // creando el boton <<
		  var oPrevious = document.createElement("a");
			  oPrevious.href = 'javascript:;';
			  oPrevious.title = this.PREVIOUS_BUTTON_IMAGE_ALT;
		  var oPreviousImg = document.createElement("img");
			  oPreviousImg.src = (this.imageRoot + this.PREVIOUS_BUTTON_IMAGE_PATH);
			  oPreviousImg.alt = this.PREVIOUS_BUTTON_IMAGE_ALT;
		  oPrevious.appendChild(oPreviousImg);
		  el.appendChild(oPrevious);
		  //YAHOO.util.Dom.setStyle(oPrevious,    'cssFloat', 'left');
		  YAHOO.util.Dom.setStyle(oPreviousImg, 'padding', '2px');
		  YAHOO.util.Event.addListener(oPrevious, "click", this.onPrevious, obj, true);

		  // paginado...
		  for (var i=0; i<this.aListElements.length; i++) {
			  var oItem = document.createElement("a");
				  oItem.href = 'javascript:;';
			      oItem.innerHTML = (i+1);
			      oItem.rel = i;
			  el.appendChild(oItem);
		      YAHOO.util.Dom.setStyle(oItem, 'margin', '4px');
			  YAHOO.util.Event.addListener ( oItem, 'click', this.onTarget, obj, true );
		  }
		  
		  // creando el boton >>
		  var oNext = document.createElement("a");
			  oNext.href = 'javascript:;';
			  oNext.title = this.NEXT_BUTTON_IMAGE_ALT;
		  var oNextImg = document.createElement("img");
			  oNextImg.src = (this.imageRoot + this.NEXT_BUTTON_IMAGE_PATH);
			  oNextImg.alt = this.NEXT_BUTTON_IMAGE_ALT;
		  oNext.appendChild(oNextImg);
		  el.appendChild(oNext);
		  //YAHOO.util.Dom.setStyle(oNext,    'cssFloat', 'right');
		  YAHOO.util.Dom.setStyle(oNextImg, 'padding', '2px');
		  YAHOO.util.Event.addListener(oNext, "click", this.onNext, obj, true);
	
		}
	  this.onTarget();
	},
	
	// BEGIN BUILT-IN DOM EVENT HANDLERS //
	
	/**
	* The default event handler fired when the user mouses out of the context element.
	* @param {DOMEvent} e	The current DOM event
	* @param {object}	obj	The object argument
	*/
	onNext: function() {
		this.hide();
		this.aElement++;
		if (this.aElement >= this.aListElements.length)
		  this.aElement = 0;
		this.show();
		var o = this;
		window.clearTimeout(this.hideProcId);
		this.hideProcId = setTimeout(function() {
					o.onNext();
					}, this.hidedelay);
	},
	/**
	* The default event handler fired when the user mouses out of the context element.
	* @param {DOMEvent} e	The current DOM event
	* @param {object}	obj	The object argument
	*/
	onPrevious: function() {
		this.hide();
		this.aElement--;
		if (this.aElement < 0)
		  this.aElement = this.aListElements.length - 1;
		this.show();
		var o = this;
		window.clearTimeout(this.hideProcId);
		this.hideProcId = setTimeout(function() {
					o.onPrevious();
					}, this.hidedelay);
	},
	
	/**
	* The default event handler fired when the user mouses out of the context element.
	* @param {DOMEvent} e	The current DOM event
	* @param {object}	obj	The object argument
	*/
	onTarget: function(e) {
		var i = 0;
		if (e) {
		  var elem = YAHOO.util.Event.getTarget (e); 
		  i = Math.abs(elem.getAttribute("rel"));
		  if (i >= this.aListElements.length) i = 0;
		}
		this.hide();
		this.aElement = i;
		this.show();
		var o = this;
		window.clearTimeout(this.hideProcId);
		this.hideProcId = setTimeout(function() {
					o.onNext();
					}, this.hidedelay);
	},	
	
	// END BUILT-IN DOM EVENT HANDLERS //
	
	/**
	* Processes the showing event
	* @param {DOMEvent} e	The current DOM event
	* @return {int}	The process ID of the timeout function associated with doShow
	*/
	show: function() {
		YAHOO.util.Dom.setStyle(this.aListElements[this.aElement], 'display', '');
	},
	
	/**
	* 
	*/
	hide: function() {
		YAHOO.util.Dom.setStyle(this.aListElements[this.aElement], 'display', 'none');
	},
	
	isImage: function() {
		return true;
	},
	
	/**
	* Returns a string representation of the object.
	* @type string
	*/ 
	toString: function() {
		return "Gallery " + this.id;
	}
};