/**
*  Panel to display enlarged pictures
*/

RBPanel = {
	container: 'image-panel',
	header: '',
	panel: null,
	images: {},
	width: {},
	height: {},
	config: {
		underlay: "shadow",
		xy: [200,70],
		close: true,
		visible: false,
		draggable: true,
		modal: true,
		effect: {
			effect: YAHOO.widget.ContainerEffect.FADE,
			duration: 0.3
		}
	},

	init: function() {
		this.panel = new YAHOO.widget.Panel(this.container, this.config);
	},
	show: function(e) {
		this.panel.setHeader(this.header);

		eles = YAHOO.util.Dom.getElementsByClassName('tab', 'div', 'main-image');
		for(i=0; i<eles.length; i++){
			if(eles[i].style.display != 'none'){
				this.panel.setBody('<img src="'+this.images[eles[i].id]+'" id="enlarged-gallery-image" />');

				//Set the width and height of the panel based on the image size
				var height = this.height[eles[i].id] + 55;
				var width = this.width[eles[i].id] + 25;

				this.panel.cfg.setProperty('width', width.toString() + 'px');
				this.panel.cfg.setProperty('height', height.toString() + 'px');
				break;
			}
		}

		this.panel.render();
		this.panel.show();
		YAHOO.util.Event.preventDefault(e);
	}

};

YAHOO.util.Event.onContentReady('image-panel', RBPanel.init, null, RBPanel);
YAHOO.util.Event.addListener('enlarge-link', 'click', RBPanel.show, null, RBPanel);