var activeMenu;

function createMenu(name){
	var el = Ext.get(name+'-link');
	var tid = 0, menu, doc = Ext.getDoc();
	
	var handleOver = function(e, t){
		if(t != el.dom && t != menu.dom && !e.within(el) && !e.within(menu)){
			hideMenu();
		}	
	};
			
	var hideMenu = function(){
		if(menu){
			menu.hide();
			if (!el.doNotRemoveClass) {
				el.removeClass('current');
			}
			el.setStyle('text-decoration', '');
			doc.un('mouseover', handleOver);
			doc.un('mousedown', handleDown);
		}
	}
	 
	var handleDown = function(e){
		if(!e.within(menu)){
			hideMenu();
		}
	}
	
	var showMenu = function(){
		clearTimeout(tid);
		tid = 0;
		
		if (!menu) {
			menu = new Ext.Layer({shadow:'sides',hideMode: 'display'}, name+'-menu');
		}
		menu.hideMenu = hideMenu;
			
		menu.el = el;
		if(activeMenu && menu != activeMenu){
			activeMenu.hideMenu();
		}
		activeMenu = menu;
		
		if (!menu.isVisible()) {
			menu.show();
//			menu.alignTo(el, 'tl-bl?');
			menu.alignTo(el, 't-b');
			menu.sync();
			el.setStyle('text-decoration', 'underline');
			if (el.hasClass('current')) {
				el.doNotRemoveClass = true;
			} else {
				el.addClass('current');
			}

			
			doc.on('mouseover', handleOver, null, {buffer:150});
			doc.on('mousedown', handleDown);
		}
	}
	
	el.on('mouseover', function(e){
		if(!tid){
			tid = showMenu.defer(150);				
		}
	});
	
	el.on('mouseout', function(e){
		if(tid && !e.within(el, true)){
			clearTimeout(tid);
			tid = 0;				
		}
	});
}

// align the testimony-link
Ext.onReady(function() {
	// Ext.get('testimony-link').alignTo('middle', 'tr-tl', [19, 50]);
	
//	var topImage = Ext.get('top-image');
//	if (topImage) {
//		topImage.alignTo('menubar', 'tr-tr', [-10, 10]);
//	}
	
	Ext.get('header').on({
		'click': function() {
			window.location = '/';
		}
	});
	
	Ext.get('header-content').on({
		'click': function(e) {
			//alert(e.target.nodeName);
			if (e.target.nodeName.toLowerCase() != 'a') {
				e.stopPropagation();
			}
		}
	});
	
	// convert conents to buttons
	Ext.select('#content a').each(function(e) { 
		e.wrap({ tag: 'span', cls: 'button-holder' }); 
	});
	
	Ext.select('#header-buttons a img').each(function(o){
		o.on({
			'mouseover': function(e) {
				var o = e.getTarget();
				o.oldSrc = o.src;
				o.src = o.oldSrc + '-over.gif';
			}, 
			'mouseout': function(e) {
				var o = e.getTarget();
				o.src = o.oldSrc;
			}
		});
	});
	
	// make image with this class to have borders
	// TODO: #community-first-image img, #community-second-image img
 	Ext.select('.image-with-border').each(function(e) { 
		var parent = e.wrap({ 
			tag: 'div', cls: 'inner-right'
		}).wrap({
			tag: 'div', cls: 'inner-left'
		}).wrap({
			tag: 'div', cls: 'rbottom'
		}).wrap({
			tag: 'div', cls: 'lbottom'
		}).wrap({
			tag: 'div', cls: 'rtop'
		}).wrap({
			tag: 'div', cls: 'ltop'
		}).wrap({
			tag: 'div', cls: 'imgbox'
		});
		parent.setWidth(e.getWidth() + 22);
	}); 
	
});

window.onload = function() {
	Ext.select('.image-container').each(function(o) {
	    var img = o.select('img').first();
		var offset = 19, x;
		o.setWidth(img.getWidth() + 23);
		var content = Ext.get('content');
		var right = content.getX() + content.getWidth();
		x = right - o.getWidth() + offset;
		if (x != o.getX()) {
			o.setX(right - o.getWidth() + offset);
		}
		
	});
}