var Windowframe = Class.create();

Windowframe.prototype = {

	classname: "Windowframe",
	description: "Create a basic window with options for x and y position, width and height, draggable, closebox, dragbar, scrolling, etc.",
	version: "0.1a",
	author: "scott@printelectric.com",
	count: 0,
	
	initialize: function(container,x,y,w,h,scroll,drag,closer) {
	
		/* class should attempt to load it's own stylesheet */
		
		this._loadStyles();
			
			/*
				container - will contain all UI created by class, default to document.body
				x - offset from container, default to 0
				y - offset from container, default to 0
				w - width of ui, default to 100%
				h - height of ui, default to undefined
				scroll - CSS overflow property, default to hidden
				drag - whether or not the UI is draggable, default to no
				close - whether the UI has a standard close box, top right corner, default to yes
			*/
		
		/* need to increment count on prototype object? so this will be a class variable */
		Windowframe.prototype.count++;
		
		if (container) {
			this.$container = container;	
		} else {
			this.$container = $(document.body);
		}
		
		if (x) {
			this.$x = x;
		} else {
			this.$x = 0;
		}
		
		if (y) {
			this.$y = y;
		} else {
			this.$y = 0;
		}
		
		if (w) {
			this.$w = w;
		} else {
			this.$w = 0;
		}
		
		if (h) {
			this.$h = h;
		} else {
			this.$h = 0;
		}
		
		if (scroll) {
			this.$scroll = 1;
		} else {
			this.$scroll = 0;
		}
		
		if (drag) {
			this.$drag = 1;
		} else {
			this.$drag = 0;
		}
		
		if (closer) {
			this.$closer = 1;
		} else {
			this.$closer = 0;
		}
		
		var $tmp = document.createElement('DIV');
		var $id = 'wf_container'+this.count;
		$tmp.id = $id;
		this.$container.insert({'top':$tmp});
		this.$ui = $($id);
		this.$ui.addClassName("wf_container");
		this.$ui.setStyle({'position':'absolute'});
		this.$ui.setStyle({zIndex:100});
		
		if (this.$w) {
			this.$ui.setStyle({'width':this.$w+'px'});
		}

		if (this.$h) {
			this.$ui.setStyle({'height':this.$h+'px'});
		}

		if (this.$x) {
			this.$ui.setStyle({'left':this.$x+'px'});
		}
		
		if (this.$y) {
			this.$ui.setStyle({'top':this.$y+'px'});
		}
		
		var $closer = document.createElement('DIV');
		$id = 'wf_closer_'+this.count;
		$closer.id = $id;
		// $closer.src = '../ui/img/wf_closebox_up.png';
		this.$ui.insert({'top':$closer});
		this.$closer = $($id);
		this.$closer.addClassName("wf_closer");
		
		var $dragger = document.createElement('DIV');
		$id = 'wf_dragger_'+this.count;
		$dragger.id = $id;
		// $dragger.src = '../ui/img/wf_topbar.png';
		this.$ui.insert({'bottom':$dragger});
		this.$dragger = $($id);
		this.$dragger.addClassName("wf_dragger");
		
		if (this.$drag) {
			new Draggable(this.$ui,{'handle':$dragger.id});
		}
		
		Event.observe(this.$closer,"mouseover",this._closebox_rollover.bindAsEventListener(this));
		Event.observe(this.$closer,"mouseout",this._closebox_rollout.bindAsEventListener(this));
		Event.observe(this.$closer,"click",this._closebox_click.bindAsEventListener(this));
		
		var $content = document.createElement('DIV');
		$id = 'wf_content_'+this.count;
		$content.id = $id;
		this.$ui.insert({'bottom':$content});
		this.$content = $($id);
		this.$content.addClassName("wf_content");
		
		this._setDragbarWidth();
		
	},
	
	hide: function() {
		this.$ui.hide();
	},
	
	show: function() {
		this.$ui.show();
	},
	
	_setDragbarWidth: function() {
		return false;
		var $uiwidth = this.$ui.getWidth();
		var $closerwidth = this.$closer.getWidth();
	},
	
	_loadStyles: function() {
		
		var $pref = getRootPrefix();
		
		/* to reliably load stylesheet, we must make sure path is root-relative */		
		var headID = document.getElementsByTagName("head")[0];         
		var cssNode = document.createElement('link');
		cssNode.type = 'text/css';
		cssNode.rel = 'stylesheet';
		cssNode.href = $pref+'ui/Windowframe.css';
		cssNode.media = 'screen';
		headID.appendChild(cssNode);
	},
	
	_closebox_rollover: function() {
		this.$closer.src = "ui/img/wf_closebox_over.png";
	},
	
	_closebox_rollout: function() {
		this.$closer.src = "ui/img/wf_closebox_up.png";
	},
	
	_closebox_click: function() {
		this.$closer.src = "ui/img/wf_closebox_down.png";
		this.kill();
	},
	
	_update: function(html) {
		if (typeof(this.$content) != "undefined") {
			this.$content.update(html);
		} else {
			return false;
		}
	},
	
	add: function(html) {
		if (typeof(this.$content) != "undefined") {
			return(this.$content.insert({'bottom':html}));
		} else {
			return false;
		}
	},
	
	setBackgroundColor: function($hex) {
		this.$content.setStyle({"backgroundColor":$hex});
	},
	
	kill: function() {
		try {
			$(this.$ui).remove();
		} catch(e) {
		}	
	}

}