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

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

// Define the CSS class for the PhotoBox
YAHOO.widget.PhotoBox.CSS_PHOTOBOX = "photobox";

// Define the HTML for the footer navigation
YAHOO.widget.PhotoBox.NAV_FOOTER_HTML = "<a id=\"$back.id\" href=\"javascript:void(null)\" class=\"back\"><img src=\"Images/left-arrow.png\" /></a><a id=\"$next.id\" href=\"javascript:void(null)\" class=\"next\"><img src=\"Images/right-arrow.png\" /></a>";

// Initialize the PhotoBox by setting up the footer navigation
YAHOO.widget.PhotoBox.prototype.init = function(el, userConfig) {
    var $D = YAHOO.util.Dom;
    var $E = YAHOO.util.Event;
    var $ = $D.get;
    
	YAHOO.widget.PhotoBox.superclass.init.call(this, el); 
	
	this.beforeInitEvent.fire(YAHOO.widget.PhotoBox);
	
	if (userConfig) {
		this.cfg.applyConfig(userConfig, true);
	}
	
	this.imageIndex = 0;
	this.images = [];
	
	this.backEl, this.nextEl;
	this.imgEl, this.captionEl;
	
	$D.addClass(this.innerElement, YAHOO.widget.PhotoBox.CSS_PHOTOBOX);
	this.setFooter(YAHOO.widget.PhotoBox.NAV_FOOTER_HTML.replace("$back.id",this.id+"_back").replace("$next.id",this.id+"_next"));
	
	this.renderEvent.subscribe(function() {
		var back = $(this.id + "_back");
		var next = $(this.id + "_next");

		$E.on(back, "mousedown", this.back, this, true);
		$E.on(next, "mousedown", this.next, this, true);

	}, this, true);

	this.initEvent.fire(YAHOO.widget.PhotoBox);
};

// Sets the current image displayed in the PhotoBox to the corresponding image in the photo dataset, 
// and determines whether back and forward arrows should be diplsayed, based on the position in the dataset
YAHOO.widget.PhotoBox.prototype.showImage = function(imgIndex) {
    var $D = YAHOO.util.Dom;
    var $E = YAHOO.util.Event;
    var $ = $D.get;
    
    if(!this.backEl) { 
        this.backEl = $(this.id + "_back");
    }
    if(!this.nextEl) { 
        this.nextEl = $(this.id + "_next");
    }
    if(!this.imgEl) { 
        this.imgEl = $(this.id + "_img");
    }
    if(!this.captionEl) { 
        this.captionEl = $(this.id + "_caption");
    }
    
	this.imageIndex = imgIndex;
	
	var currentImg = this.images[this.imageIndex];
	if(!currentImg) { 
        var img = $("i-a-" + this.imageIndex);
        var imgId = img.getAttribute("i");
        var imgSrc = img.getAttribute("s");
        var imgCaption = img.getAttribute("c");
        var imgConfig = { id : imgId, src : imgSrc, caption : imgCaption };
        
        this.images[this.imageIndex] = imgConfig;
        currentImg = this.images[this.imageIndex];
	}
	
	this.imgEl.setAttribute("src",currentImg.src);
	this.imgEl.setAttribute("title",currentImg.caption);
	this.imgEl.setAttribute("height",500);
	this.imgEl.setAttribute("width",500);
	
	$D.setStyle(this.body, "height", "auto");

	this.captionEl.innerHTML = currentImg.caption;

	if (this.imageIndex == 0) {
		$D.setStyle(this.backEl, "display", "none");
	} else {
		$D.setStyle(this.backEl, "display", "block");
	}

	if (this.imageIndex == (1000-1)) {
		$D.setStyle(this.nextEl, "display", "none");
	} else {
		$D.setStyle(this.nextEl, "display", "block");
	}
	
	this.show();
};

// Navigates to the next image
YAHOO.widget.PhotoBox.prototype.next = function() {	
	if (typeof this.imageIndex == "undefined") {
		this.imageIndex = 0;
	}

	this.showImage(this.imageIndex+1);
};

// Navigates to the previous image
YAHOO.widget.PhotoBox.prototype.back = function() {
	if (typeof this.imageIndex == "undefined") {
		this.imageIndex = 0;
	}

	this.showImage(this.imageIndex-1);
};

// Overrides the handler for the "modal" property with special animation-related functionality
YAHOO.widget.PhotoBox.prototype.configModal = function(type, args, obj) {
	var modal = args[0];

	if (modal) {
		this.buildMask();

		if (typeof this.maskOpacity == "undefined") {
			this.mask.style.visibility = "hidden";
			this.mask.style.display = "block";
			this.maskOpacity = YAHOO.util.Dom.getStyle(this.mask,"opacity");
			this.mask.style.display = "none";
			this.mask.style.visibility = "visible";
		}

		if (! YAHOO.util.Config.alreadySubscribed( this.beforeShowEvent, this.showMask, this ) ) {
			this.beforeShowEvent.subscribe(this.showMask, this, true);
		}
		if (! YAHOO.util.Config.alreadySubscribed( this.hideEvent, this.hideMask, this) ) {
			this.hideEvent.subscribe(this.hideMask, this, true);
		}
		if (! YAHOO.util.Config.alreadySubscribed( YAHOO.widget.Overlay.windowResizeEvent, this.sizeMask, this ) ) {
			YAHOO.widget.Overlay.windowResizeEvent.subscribe(this.sizeMask, this, true);
		}
		if (! YAHOO.util.Config.alreadySubscribed( this.destroyEvent, this.removeMask, this) ) {
			this.destroyEvent.subscribe(this.removeMask, this, true);
		}
		this.cfg.refireEvent("zIndex");
	} else {
		this.beforeShowEvent.unsubscribe(this.showMask, this);
		this.beforeHideEvent.unsubscribe(this.hideMask, this);
		YAHOO.widget.Overlay.windowResizeEvent.unsubscribe(this.sizeMask);
	}
};

// Overrides the showMask function to allow for fade-in animation
YAHOO.widget.PhotoBox.prototype.showMask = function() {
	if (this.cfg.getProperty("modal") && this.mask) {
		YAHOO.util.Dom.addClass(document.body, "masked");
		this.sizeMask();

		var o = this.maskOpacity;

		if (! this.maskAnimIn) {
			this.maskAnimIn = new YAHOO.util.Anim(this.mask, {opacity: {to:o}}, 0.25)
			YAHOO.util.Dom.setStyle(this.mask, "opacity", 0);
		}

		if (! this.maskAnimOut) {
			this.maskAnimOut = new YAHOO.util.Anim(this.mask, {opacity: {to:0}}, 0.25)
			this.maskAnimOut.onComplete.subscribe(function() {
													this.mask.tabIndex = -1;
													this.mask.style.display = "none";
													this.hideMaskEvent.fire();
													YAHOO.util.Dom.removeClass(document.body, "masked");
												  }, this, true);
			
		}
		this.mask.style.display = "block";
		this.maskAnimIn.animate();
		this.mask.tabIndex = 0;
		this.showMaskEvent.fire();
	}
};

// Overrides the showMask function to allow for fade-out animation
YAHOO.widget.PhotoBox.prototype.hideMask = function() {
	if (this.cfg.getProperty("modal") && this.mask) {
		this.maskAnimOut.animate();
	}
};
// END PHOTOBOX SUBCLASS //