// BEGIN PHOTOBOX SUBCLASS
PhotoBox = function(el, userConfig) {
	if (arguments.length > 0) {
		PhotoBox.superclass.constructor.call(this, el, userConfig);
	}
}

// Inherit from YAHOO.widget.Module
YAHOO.extend(PhotoBox, YAHOO.widget.Module);

// Initialize the PhotoBox
PhotoBox.prototype.init = function(el, userConfig) {
	PhotoBox.superclass.init.call(this, el);
	
	this.beforeInitEvent.fire(PhotoBox);
	
	if (userConfig) {
		this.cfg.applyConfig(userConfig, true);
	}
	
	YAHOO.util.Event.addListener(this.element, "mousedown", this.thumbClicked, this, true);
	this.thumbListDiv = YAHOO.util.Dom.getElementsByClassName("thumblist", "div", this.element)[0];
	
	this.initEvent.fire(PhotoBox);
}

// Set up the PhotoBox's "photos" property for setting up the list of photos
PhotoBox.prototype.initDefaultConfig = function() {
	PhotoBox.superclass.initDefaultConfig.call(this);
	this.cfg.addProperty("photos", {handler: this.configPhotos, suppressEvent:true });
	this.cfg.addProperty("preview_width", {value: 278});
	this.cfg.addProperty("preview_height", {value: 186});
	this.cfg.addProperty("thumbnail_width", {value: 84});
	this.cfg.addProperty("thumbnail_height", {value: 56});
	this.cfg.addProperty("hspacing", {value: 2});
	this.cfg.addProperty("vspacing", {value: 2});
	this.cfg.addProperty("thumbnail_count", {value: 3});
}

// Handler executed when the "photos" property is modified
PhotoBox.prototype.configPhotos = function(type, args, obj) {
	var photos = args[0];
	if (photos) {
		this.images = [];
		
		if (! (photos instanceof Array)) {
			photos = [photos];
		}
		
		this._removeChildrenFromNode(this.thumbListDiv);
		
		var thumbnailCount = this.cfg.getProperty("thumbnail_count");
		
		for (var p = 0; p < photos.length; p++) {
			var photo = photos[p];
			
			// create thumbnail
			var thumbDiv = document.createElement("DIV");
			YAHOO.util.Dom.addClass(thumbDiv, "thumb");
			YAHOO.util.Dom.setStyle(thumbDiv, "margin-bottom", "" + this.cfg.getProperty("vspacing") + "px");
			this.thumbListDiv.appendChild(thumbDiv);
			
			var thumbImg = document.createElement("IMG");
			if (photo.thumbsrc && photo.thumbsrc != "") {
				thumbImg.setAttribute("src", photo.thumbsrc);
			} else {
				thumbImg.setAttribute("src", photo.src);
			}
			thumbImg.setAttribute("title", photo.caption);
			thumbImg.setAttribute("width", this.cfg.getProperty("thumbnail_width"));
			thumbImg.setAttribute("height", this.cfg.getProperty("thumbnail_height"));
			thumbImg.setAttribute("id", this.id + "_img_" + p);
			if (p >= thumbnailCount) {
				YAHOO.util.Dom.setStyle(thumbImg, "display", "none");
			} else {
				YAHOO.util.Dom.setStyle(thumbImg, "display", "inline");
			} 
			thumbDiv.appendChild(thumbImg);
			
			
			this.images[this.images.length] = thumbImg;
		}
		
		if (photos.length > thumbnailCount) {
			// more photos that can be handled as thumbails.
			// create navigation bar.
			var navigationBar = document.createElement("DIV");
			YAHOO.util.Dom.addClass(navigationBar, "nav");
			YAHOO.util.Dom.setStyle(navigationBar, "width", this.cfg.getProperty("thumbnail_width") + "px"); 
			this.thumbListDiv.appendChild(navigationBar);

			this.prevDiv = document.createElement("DIV");
			YAHOO.util.Dom.addClass(this.prevDiv, "prev");
			YAHOO.util.Dom.setStyle(this.prevDiv, "width", (this.cfg.getProperty("thumbnail_width")/2 - 3) + "px");
			navigationBar.appendChild(this.prevDiv);			
			 
			YAHOO.util.Event.addListener(this.prevDiv, "mousedown", this.prevClicked, this, true);
						 
			this.nextDiv = document.createElement("DIV");
			YAHOO.util.Dom.addClass(this.nextDiv, "next");
			YAHOO.util.Dom.setStyle(this.nextDiv, "width", (this.cfg.getProperty("thumbnail_width")/2 - 3) + "px");
			navigationBar.appendChild(this.nextDiv);
						
			YAHOO.util.Event.addListener(this.nextDiv, "mousedown", this.nextClicked, this, true);
						 
			this.prevDiv.innerHTML = '<a class=photonext href="javascript:;">prev ' + thumbnailCount + '</a>';
			this.nextDiv.innerHTML = '<a class=photonext href="javascript:;">next ' + Math.min(thumbnailCount, photos.length - thumbnailCount) + '</a>';
			
			YAHOO.util.Dom.setStyle(this.prevDiv, "display", "none");
			YAHOO.util.Dom.setStyle(this.nextDiv, "display", "block");
		}
		
		this.firstVisibleThumb = 0;
		this.setImage(0);
		var myElem = this.element;
		YAHOO.util.Dom.setStyle(myElem, "height", "" + (this.cfg.getProperty("preview_height") + 32) + "px");
		YAHOO.util.Dom.setStyle(myElem, "width", "" + (this.cfg.getProperty("preview_width") 
			+ this.cfg.getProperty("hspacing") + this.cfg.getProperty("thumbnail_width")) + "px");
		YAHOO.util.Dom.setStyle(this.thumbListDiv, "height", "" + this.cfg.getProperty("preview_height") + "px");
		YAHOO.util.Dom.setStyle(this.thumbListDiv, "width", "" + this.cfg.getProperty("thumbnail_width") + "px");
		YAHOO.util.Dom.setStyle(this.thumbListDiv, "padding-left", "" + this.cfg.getProperty("hspacing") + "px");
		this.realScrollHeight =(this.cfg.getProperty("thumbnail_height") + this.cfg.getProperty("vspacing")) * this.images.length;
//		YAHOO.util.Dom.setStyle(myElem, "display", "block");
		this.show();
	} else {
		var myElem = this.element;
		YAHOO.util.Dom.setStyle(myElem, "height", "0px");
		YAHOO.util.Dom.setStyle(this.thumbListDiv, "height", "0px");
		YAHOO.util.Dom.setStyle(myElem, "width", "0px");
//		YAHOO.util.Dom.setStyle(myElem, "display", "none");
		this.hide();
	}
}

PhotoBox.prototype.thumbClicked = function(e) {
	try {
		var id = YAHOO.util.Event.getTarget(e).id;
		var pos = id.substring(id.lastIndexOf("_") + 1);
		var newIndex = parseInt(pos);
		if (!isNaN(newIndex)) {
			this.setImage(newIndex);
		}
	} catch (e) {}
}

PhotoBox.prototype.prevClicked = function(e) {
	try {
		var thumbnailCount = this.cfg.getProperty("thumbnail_count");
		
		for (var i = this.firstVisibleThumb; i < (this.firstVisibleThumb + thumbnailCount) && i < this.images.length; i++) {
			YAHOO.util.Dom.setStyle(this.images[i], "display", "none");
		}
		
		this.firstVisibleThumb = Math.max(0, this.firstVisibleThumb - thumbnailCount);
		
		for (var i = this.firstVisibleThumb; i < (this.firstVisibleThumb + thumbnailCount) && i < this.images.length; i++) {
			YAHOO.util.Dom.setStyle(this.images[i], "display", "inline");
		} 

		if (this.firstVisibleThumb > 0) {
			YAHOO.util.Dom.setStyle(this.prevDiv, "display", "block");
		} else {
			YAHOO.util.Dom.setStyle(this.prevDiv, "display", "none");
		}
		
		if (i < this.images.length) {
			YAHOO.util.Dom.setStyle(this.nextDiv, "display", "block");
		} else {
			YAHOO.util.Dom.setStyle(this.nextDiv, "display", "none");
		}
	} catch (e) {}
}

PhotoBox.prototype.nextClicked = function(e) {
	try {
		var thumbnailCount = this.cfg.getProperty("thumbnail_count");
		
		for (var i = this.firstVisibleThumb; i < (this.firstVisibleThumb + thumbnailCount) && i < this.images.length; i++) {
			YAHOO.util.Dom.setStyle(this.images[i], "display", "none");
		}
		
		this.firstVisibleThumb = i;
		
		for (var i = this.firstVisibleThumb; i < (this.firstVisibleThumb + thumbnailCount) && i < this.images.length; i++) {
			YAHOO.util.Dom.setStyle(this.images[i], "display", "inline");
		} 

		if (this.firstVisibleThumb > 0) {
			YAHOO.util.Dom.setStyle(this.prevDiv, "display", "block");
		} else {
			YAHOO.util.Dom.setStyle(this.prevDiv, "display", "none");
		}
		
		if (i < this.images.length) {
			YAHOO.util.Dom.setStyle(this.nextDiv, "display", "block");
		} else {
			YAHOO.util.Dom.setStyle(this.nextDiv, "display", "none");
		}
	} catch (e) {}
}

// sets the current image displayed in the PhotoBox
PhotoBox.prototype.setImage = function(index) {
	var photos = this.cfg.getProperty("photos");
	if (photos) {
		if (! (photos instanceof Array)) {
			photos = [photos];
		}
	}
	
	var current = this.images[index];
	
	this.currentImage = index;
	
	var previewDiv = YAHOO.util.Dom.getElementsByClassName("preview", "div", this.element)[0];
	YAHOO.util.Dom.setStyle(previewDiv, "margin-bottom", "" + this.cfg.getProperty("vspacing") + "px");
	
	var imgNode = document.createElement("IMG");
	imgNode.setAttribute("src", this.cfg.getProperty("photos")[index].src);
	imgNode.setAttribute("title", current.title);
	imgNode.setAttribute("width", this.cfg.getProperty("preview_width"));
	imgNode.setAttribute("height", this.cfg.getProperty("preview_height"));
	
	if(previewDiv.childNodes.length != 0) {
		previewDiv.replaceChild(imgNode, previewDiv.childNodes[0]);
	} else {
		previewDiv.appendChild(imgNode);
	}
}

PhotoBox.prototype.showNext = function() {
	if (typeof this.currentImage == "undefined") {
		this.currentImage = 0;
	}
	if (this.currentImage + 1 < this.images.length) {
		this.setImage(this.currentImage + 1);
	} else {
		this.setImage(0);
	}
}

PhotoBox.prototype._removeChildrenFromNode = function(node) {
   if (node == undefined && node == null) {
      return;
   }
   var len = node.childNodes.length;
   for(var i = len -1 ; i >= 0; i--) {
      node.removeChild(node.childNodes[i]);
   }
}

// sets the current image displayed in the PhotoBox
PhotoBox.prototype.setImageByUrl = function(url) {
	var previewDiv = YAHOO.util.Dom.getElementsByClassName("preview", "div", this.element)[0];
	YAHOO.util.Dom.setStyle(previewDiv, "margin-bottom", "" + this.cfg.getProperty("vspacing") + "px");
	
	var imgNode = document.createElement("IMG");
	imgNode.setAttribute("src", url);
	imgNode.setAttribute("title", "");
	imgNode.setAttribute("width", this.cfg.getProperty("preview_width"));
	imgNode.setAttribute("height", this.cfg.getProperty("preview_height"));
	
	if(previewDiv.childNodes.length != 0) {
		previewDiv.replaceChild(imgNode, previewDiv.childNodes[0]);
	} else {
		previewDiv.appendChild(imgNode);
	}
}

function createPhotoBox(divId, previewWidth, previewHeight, thumbnailWidth, thumbnailHeight, hSpacing, vSpacing, photos) {
	var pagePhotoBoxView = new PhotoBox(divId, {preview_width: previewWidth, preview_height: previewHeight, 
		thumbnail_width:thumbnailWidth, thumbnail_height: thumbnailHeight, hspacing: hSpacing, vspacing: vSpacing });
	pagePhotoBoxView.render();
	
	pagePhotoBoxView.cfg.setProperty("photos", photos);
	return pagePhotoBoxView;
}