var Shower = Class.create();
Shower.prototype = {
	initialize: function(modelem, secelem, toBody){
		this.modelem = modelem;
		this.secelem = secelem;
		var tags = ['div','img','h3','ul','p'];
		if (toBody)
			this.secchild = document.body;
		for (var j=0;j<tags.length && !this.secchild;j++)
			if ((secelem.getElementsByTagName(tags[j])[0] || {}).offsetHeight >= 5)
				this.secchild = secelem.getElementsByTagName(tags[j])[0];
		if (!this.secchild || secelem.getElementsByTagName('embed').length > 0 || secelem.getElementsByTagName('object').length > 0 || modelem.innerHTML.indexOf('feed.aspx') > 0){
			modelem.style.display = 'block';
			return;
		}
		//create a wrapper for the buttons
		this.wrapper = new Element('div');	
		//var blind = new Element('div');
		//blind.setStyle('width:100%;height:100%;background-color:#000;opacity:.1;position:absolute');
		//this.wrapper.appendChild(blind);
		var innerwrapper = new Element('div');
		//innerwrapper.setStyle('position:absolute;top:0;right:0');
		this.wrapper.appendChild(innerwrapper);

		//add the buttons to the wrapper, copying attributes off the modelems
		var as = this.modelem.getElementsByTagName('a');
		var btn, i;
		for (i=0;i<as.length;i++){
			btn = as[i].cloneNode(false);
			if (as[i].innerHTML.indexOf('Edit') >= 0)
				btn.appendChild(new Element('img', {src: '/js/pencil.png', title: 'Edit Section', width:24, height:24}));
			else if (as[i].innerHTML.indexOf('Properties') >= 0)
				btn.appendChild(new Element('img', {src: '/js/config.png', title: 'Section Properties', width:24, height:24}));
			else if (as[i].innerHTML.indexOf('feed.aspx') >= 0)
				btn.appendChild(new Element('img', {src: '/js/rss.gif', title: 'RSS Feed', width:24, height:24}));
			innerwrapper.appendChild(btn);
		}
		btn = new Element('a', {href:'#'});
		Event.observe(btn, 'click', this.hide.bind(this, true));
		btn.appendChild(new Element('img', {src: '/js/cross.png', title: 'Hide Menu', width:24, height:24}));

		if (i==0){
			modelem.style.display = 'block';
			return;
		}
		i++;
		innerwrapper.appendChild(btn);

		//this.secelem.setStyle('position:relative');
		if (!toBody)
			$(this.wrapper).setStyle('display:none');
		$(this.modelem).setStyle('display:none');
		document.body.appendChild(this.wrapper);
		//set the position of the wrapper to match the section div
		Position.clone(this.secchild, this.wrapper);
		this.wrapper.style.left = (parseInt(this.wrapper.style.left) + parseInt(this.wrapper.style.width) - (25 * i)) + 'px';
		this.wrapper.style.top = parseInt(this.wrapper.style.top) + (window.pageYOffset || document.body.scrollTop) + "px";
		this.wrapper.style.height = '';
		this.wrapper.style.width = (25 * i) +'px';
		$(this.wrapper).setStyle('position:absolute;text-align:right');
		//TODO: or, if there's no content inside the section div, stick it up at the top of the page
		//...I should really know what the section is called if the item is removed from the 
		//attach events for hover over and out of the section
		if (!toBody){
			Event.observe(secelem, 'mouseover', this.show.bind(this));
			Event.observe(secelem, 'mouseout', this.hide.bind(this, false));
			Event.observe(this.wrapper, 'mouseover', this.show.bind(this));
			Event.observe(this.wrapper, 'mouseout', this.hide.bind(this, false));
		}
	},
	show: function(){
		if (this.noreshowtimer){
			clearTimeout(this.noreshowtimer);
		}else{
			this.wrapper.style.display = "block";
		}
	},
	hide: function(noreshow,e){
		if (noreshow)
			this.noreshowtimer = setTimeout(this.clearnoreshow.bind(this), 500);
		else if (this.noreshowtimer){
			clearTimeout(this.noreshowtimer);
			this.noreshowtimer = setTimeout(this.clearnoreshow.bind(this), 500);
		}
		this.wrapper.style.display = "none";
		if (noreshow){
			Event.stop(e);
		}
	},
	clearnoreshow: function(){
		this.noreshowtimer = null;
	},
	fade: function(){
		
	}
}

Event.observe(window, 'load', function (){
		var moddivs = [];//document.getElementsByClassName('moduletools');
		var secdivs = [];//document.getElementsByClassName('section');
		var alldivs = document.getElementsByTagName('div');
		for (var i=0; i<alldivs.length; i++){
			if (alldivs[i].className == 'moduletools')
				moddivs.push(alldivs[i]);
			else if (alldivs[i].className == 'section')
				secdivs.push(alldivs[i]);
		}
		if (moddivs.length == 0)
			return;
		for (var i=0;i<moddivs.length;i++)
			new Shower(moddivs[i], secdivs[i], i==0);
	}
)