IZ.loadPagelet = function(href,div){
	//request the content
	dom.ajax(href,function(xmlDoc){
	   	//insert the html content
	   	IZ.getCdata(div,xmlDoc);
	});
}

/*
 * return contents of the first cdata 
 * section in a node
 */
IZ.getCdata = function(div,xmlDoc){	
    //root element
    var root = xmlDoc.documentElement;

    //get element containing the html content
    var content = root.getElementsByTagName("content")[0];

    //get element containing the javascript content
    var scripts = root.getElementsByTagName("scripts")[0];

	//load the html
	div.innerHTML = IZ.getXmlData(content);

   	//working with a modal?
   	if(IZ.modals.active) IZ.modals.active.center();

	//bring the javascript in
	eval(IZ.getXmlData(scripts));
}

IZ.getXmlData = function(el){
	// to contain results
	var data;
	
	//loop through for the cdata
	for(i=0; i<el.childNodes.length; i++){
	    //convenience
	    var node = el.childNodes[i];

	    //cdata sections have a nodeType of 4
	    if(node.nodeType == 4) {
	    	//extract the content
	    	data = node.nodeValue;
	    }
	}

	// return result
	return data;
}

IZ.modals = {
	links : new Array(),
	active : null,
	screen : null,
	masker : null,

	//find all modal links...
	init : function() {
		//with "modal" in the ref attribute
		this.find();
	},

	//find all modal links..
	find : function() {
		//with "modal" in the rel attribute
		dom.get("a").each(function(){
			if(this.rel.match(/modal/i) || this.href.match(/pcjgallery/)){
				if(this.href.match(/pcjgallery/)){
					this.href = "/ui/components/modal/gallery-popup.jsp";
					this.rel = "modal gallery";
				}
				//that don't already have a modal
				if(!this.modal) IZ.modals.setup(this);
			}
		});
	},

	//attach a modal object
	setup : function(link) {
		//create a new modal object
		var modal_obj = dom.clone(IZ.modal);

		//assemble the modal's html
		modal_obj.assemble(link);

		//attach it to the link
		link.modal = modal_obj

		//show the modal onclick
		link.onclick = function() {
			this.modal.display();
			return false;
		}

		//setup a "mask" to dim the page
		this.masker = document.createElement('div');

		//it's going to need some styling
		this.masker.className = 'mask';
	},

	/*
	 * some inputs, like textareas and select boxes, are
	 * rendered by the OS and cannot be hidden, even by
	 * absolutely positioned elements. these must be
	 * temporarily removed from the screen
	 */
	hide_inputs : function(){
		dom.get('textarea').each(function(){
			this.style.position = 'relative';
			this.style.left = '-999em';
		});
		dom.get('select').each(function(){
			this.style.position = 'relative';
			this.style.left = '-999em';
		});
	},

	show_inputs : function(){
		dom.get('textarea').each(function(){
			this.style.position = '';
			this.style.left = '';
		});
		dom.get('select').each(function(){
			this.style.position = '';
			this.style.left = '';
		});
	},

	mask : function() {
		//remove troublesome inputs
		this.hide_inputs();
		
		//and hook it into the dom
		document.body.appendChild(this.masker);
	},

	unmask : function() {
		//move the inputs back in place
		this.show_inputs();
		
		//remove the mask from the dom
		document.body.removeChild(this.masker);
	}
}

IZ.modal = {
	link : null,
	dialog : null,
	content : null,
	belongs_to : null,
	loaded : null,
	output : null,

	assemble : function(link) {
		//what link is this modal attached to?
		this.link = link;

		//some shiz
		this.belongs_to = this.link.parentNode;
		
		//the modal container
		this.dialog = document.createElement('div');

		//the modal's content area
		this.content = document.createElement('div');

		//assign some css classes
		this.dialog.className = link.rel;
		this.content.className = 'content';

		//modals opened from a link with a title...
		if(this.link.title) {
			//will contain html for the titlebar
			var html;

			//create a titlebar for the modal
			html  = '<div class="titlebar">';
			html += '<p>' + this.link.title + '</p>';
			html += '<a href="javascript:IZ.modals.active.kill()"></a>';
			html += '</div>';

			//inject it
			this.dialog.innerHTML = html;
		}

		//add the content area
		this.dialog.appendChild(this.content);
	},

	center : function() {
		//top margin gets set to -1/2 the height
		this.dialog.style.marginTop = -(this.dialog.offsetHeight / 2) + 'px';

		//and left margin to -1/2 the width
		this.dialog.style.marginLeft = -(this.dialog.offsetWidth / 2) + 'px';

		//which leaves it centered, hopefully
		this.dialog.style.visibility = 'visible';
	},

	display : function() {
		//mask screen...
		IZ.modals.mask();

		//this is now our active modal
		IZ.modals.active = this;

		//appends the modal to the dom, although invisible
		document.body.appendChild(this.dialog);

		//populate the modal
		IZ.loadPagelet(this.link.href,this.content);
	},

	kill : function() {
		//hide the screen
		IZ.modals.unmask();

		//this is no longer the active modal
		IZ.modals.active = false;

		/*
		 * we don't want it showing next time it's
		 * introduced into the dom via this.display
		 */
		this.dialog.style.visibility = '';

		//remove the modal from the dom
		document.body.removeChild(this.dialog);
		
		//pipe the output somewhere
		this.pipe();
	},

	pipe : function(){
		if(this.link.target) {
			// get items from the target attribute
			var targs = this.link.target.split(",");

			//closure var
			var output = this.output;

			// loop through them
			for(i=0; i<targs.length; i++){
				// find the specified nodes
				dom.get(targs[i]).each(function(){
					// input?
					if(this.nodeName == "INPUT") {
						// pipe the output into its value attribute
						this.value = output;
					}
					
					// any other element
					else {
						// pipe the output into the innerHTML
						this.innerHTML = output;
					}
				});
			}
		}
	}
}