YAHOO.namespace("com.pressingondevelopment.ui");

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

// Inherit from YAHOO.widget.Panel
YAHOO.extend(YAHOO.com.pressingondevelopment.ui.MediaBox, YAHOO.widget.Panel);

// Define the CSS class for the PhotoBox
YAHOO.com.pressingondevelopment.ui.MediaBox.CSS_PHOTOBOX = "mediabox";

// Define the HTML for the footer navigation
YAHOO.com.pressingondevelopment.ui.MediaBox.NAV_FOOTER_HTML = "<a id=\"$back.id\" href=\"javascript:void(null)\" class=\"back\"><img src=\"../js/yui/build/assets/img/ybox-back.gif\" /></a><a id=\"$next.id\" href=\"javascript:void(null)\" class=\"next\"><img src=\"../js/yui/build/assets/img/ybox-next.gif\" /></a>";

// Initialize the PhotoBox by setting up the footer navigation
YAHOO.com.pressingondevelopment.ui.MediaBox.prototype.init = function(el, userConfig) {
	YAHOO.com.pressingondevelopment.ui.MediaBox.superclass.init.call(this, el); 
	
	this.beforeInitEvent.fire(YAHOO.com.pressingondevelopment.ui.MediaBox);

	YAHOO.util.Dom.addClass(this.innerElement, YAHOO.com.pressingondevelopment.ui.MediaBox.CSS_PHOTOBOX);
	
	if (userConfig) {
		this.cfg.applyConfig(userConfig, true);
	}
	
	this.setFooter(YAHOO.com.pressingondevelopment.ui.MediaBox.NAV_FOOTER_HTML.replace("$back.id",this.id+"_back").replace("$next.id",this.id+"_next"));
	
	//Hides the media prior to closing
	this.beforeHideEvent.subscribe(function() {
			this.body.innerHTML="";
	},this,true);
	
	this.renderEvent.subscribe(function() {
		var back = document.getElementById(this.id + "_back");
		var next = document.getElementById(this.id + "_next");

		YAHOO.util.Event.addListener(back, "mousedown", this.back, this, true);
		YAHOO.util.Event.addListener(next, "mousedown", this.next, this, true);

	}, this, true);

	this.initEvent.fire(YAHOO.com.pressingondevelopment.ui.MediaBox);
};

// Set up the PhotoBox's "media" property for setting up the list of media
YAHOO.com.pressingondevelopment.ui.MediaBox.prototype.initDefaultConfig = function() {
	YAHOO.com.pressingondevelopment.ui.MediaBox.superclass.initDefaultConfig.call(this);
	
	this.cfg.addProperty("media", { handler:this.configMedia, suppressEvent:true });
};

// Handler executed when the "photos" property is modified
YAHOO.com.pressingondevelopment.ui.MediaBox.prototype.configMedia = function(type, args, obj) {
	var media = args[0];
	
	if (media) {
		this.images = [];

		if (! (media instanceof Array)) {
			media = [media];
		}

		this.currentImage = 0;

		if (media.length == 1) {
			this.footer.style.display = "none";
		}
		
		for (var p=0;p<media.length;p++) {
			this.images[this.images.length] = media[p];
		}

		
		if(this.cfg.getProperty("visible")){
			this.setImage(0);
		}
	}
};

// 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.com.pressingondevelopment.ui.MediaBox.prototype.setImage = function(index) {
	
	var media = this.cfg.getProperty("media");

	if (media) {
		if (! (media instanceof Array)) {
			media = [media];
		}
		
		var back = document.getElementById(this.id + "_back");
		var next = document.getElementById(this.id + "_next");
		var img =  document.getElementById(this.id + "_img");
		var title = document.getElementById(this.id + "_title");

		this.currentImage = index;

		var current = this.images[index];
		
		this.body.innerHTML=current.formatter();
		
		this.body.style.height = "auto";

		title.innerHTML = current.title;

		if (this.currentImage == 0) {
			back.style.display = "none";
		} else {
			back.style.display = "block";
		}

		if (this.currentImage == (media.length-1)) {
			next.style.display = "none";
		} else {
			next.style.display = "block";
		}
	}
};

// Navigates to the next image
YAHOO.com.pressingondevelopment.ui.MediaBox.prototype.next = function() {	
	if (typeof this.currentImage == 'undefined') {
		this.currentImage = 0;
	}

	this.setImage(this.currentImage+1);
};

// Navigates to the previous image
YAHOO.com.pressingondevelopment.ui.MediaBox.prototype.back = function() {
	if (typeof this.currentImage == 'undefined') {
		this.currentImage = 0;
	}

	this.setImage(this.currentImage-1);
};

// Overrides the handler for the "modal" property with special animation-related functionality
YAHOO.com.pressingondevelopment.ui.MediaBox.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.com.pressingondevelopment.ui.MediaBox.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)
			this.maskAnimIn.onComplete.subscribe(function(){
													this.setImage(0)
													this.cfg.setProperty("fixedcenter",true,false)
													},this,true);
			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.com.pressingondevelopment.ui.MediaBox.prototype.hideMask = function() {
	
	if (this.cfg.getProperty("modal") && this.mask) {
		this.maskAnimOut.animate();
	}
};

// END PHOTOBOX SUBCLASS //