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

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

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

// Define the HTML for the footer navigation
PhotoBox.NAV_FOOTER_HTML = "<a id=\"$back.id\" href=\"javascript:void(null)\" class=\"back\"><img src=\"/img/photobox-previous.gif\" /></a><a id=\"$next.id\" href=\"javascript:void(null)\" class=\"next\"><img src=\"/img/photobox-next.gif\" /></a>";

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

	YAHOO.util.Dom.addClass(this.innerElement, PhotoBox.CSS_PHOTOBOX);
	
	if (userConfig) {
		this.cfg.applyConfig(userConfig, true);
	}
	
	this.setFooter(PhotoBox.NAV_FOOTER_HTML.replace("$back.id",this.id+"_back").replace("$next.id",this.id+"_next"));

    var esc_key = new YAHOO.util.KeyListener(document, { keys: [27] },  							
                		  								  { fn:this.hide,
													scope:this,
													correctScope:true }, "keyup" );

    var next_key = new YAHOO.util.KeyListener(document, { keys: [32, 38, 39] },  							
                		  								  { fn:this.next,
													scope:this,
													correctScope:true }, "keydown" );

    var back_key = new YAHOO.util.KeyListener(document, { keys: [37, 40] },
                		  								  { fn:this.back,
													scope:this,
													correctScope:true }, "keydown" );
													
	this.cfg.queueProperty("keylisteners", [esc_key, next_key, back_key]);
	
	this.renderEvent.subscribe(function() {
		var back = document.getElementById(this.id + "_back");
		var next = document.getElementById(this.id + "_next");
		var bd = document.getElementById(this.id+"_bd");		

		YAHOO.util.Event.addListener(back, "mousedown", this.back, this, true);
		YAHOO.util.Event.addListener(next, "mousedown", this.next, this, true);
		YAHOO.util.Event.addListener(this.mask, "mousedown", this.hide, this, true);
		YAHOO.util.Event.addListener(bd, "mousedown", this.hide, this, true);		
		
	}, this, true);

	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 });
};

// 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.currentImage = 0;

		if (photos.length == 1) {
			this.footer.style.display = "none";
		}

		for (var p=0;p<photos.length;p++) {
			var photo = photos[p];
			var img = new Image();
			img.src = photo.src;
//			img.title = photo.caption;
			img.id = this.id + "_img";
//			img.width = 500
			this.images[this.images.length] = img;
		}

		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
PhotoBox.prototype.setImage = function(index) {
	var photos = this.cfg.getProperty("photos");

	if (photos) {
		if (! (photos instanceof Array)) {
			photos = [photos];
		}
		
		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];

		var imgNode = document.createElement("IMG");
		imgNode.setAttribute("src",current.src);
		imgNode.setAttribute("title",current.title);
//		imgNode.setAttribute("width",500);
		imgNode.setAttribute("id",current.id);
		
		img.parentNode.replaceChild((this.browser == "safari"?imgNode:current), img);
		
		this.body.style.height = "auto";
		this.body.style.width = "auto";		

//		title.innerHTML = current.title;

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

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

// Navigates to the next image
PhotoBox.prototype.next = function() {	
    if (this.currentImage == (photos.length-1)) {
        return;
    }

	if (typeof this.currentImage == 'undefined') {
		this.currentImage = 0;
	}

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

// Navigates to the previous image
PhotoBox.prototype.back = function() {
	if (this.currentImage == 0) {
        return;
	};

	if (typeof this.currentImage == 'undefined') {
		this.currentImage = 0;
	}

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

// Overrides the handler for the "modal" property with special animation-related functionality
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
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.05)
			YAHOO.util.Dom.setStyle(this.mask, "opacity", 0);
		}

		if (! this.maskAnimOut) {
			this.maskAnimOut = new YAHOO.util.Anim(this.mask, {opacity: {to:0}}, 0.05)
			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
PhotoBox.prototype.hideMask = function() {
	if (this.cfg.getProperty("modal") && this.mask) {
		this.maskAnimOut.animate();
	}
};
// END PHOTOBOX SUBCLASS //


function photobox_show_image(event, params){
    params.photobox.setImage(params.idx);
    params.photobox.show();
}


function photobox_init(event, photos) {
	var photobox = new PhotoBox("photobox", 
	{ 
		effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.05}, 
		fixedcenter:true,
		constraintoviewport:true,
		underlay:"none",
		close: false,
		visible:false,
		draggable:false,
		modal:true, 
		photos: photos

	} );
	photobox.render();	
    YAHOO.util.Event.addListener("image_main_a", "click", photobox.show, photobox, true);
    
    for(var i=0; i<photos.length; i++){
        if(document.getElementById("inline_image_"+photos[i]["id"])){
            YAHOO.util.Event.addListener("inline_image_"+photos[i]["id"], "click", photobox_show_image, {photobox: photobox, idx: i}, true);        
        }
    }
}