Ext.onReady(function(){
	var doc = Ext.getDoc();
	var menuContainer = Ext.get('menu-container');
	var bName = navigator.appName;
	var bVer;
	/*@cc_on
	@if (@_jscript_version <= 5.6)
	  bVer = 6;
	/*@end @*/


	Ext.select('#menu-container .menu-item a').each(function(el) {
		el.addListener('mouseover', showMenu, this, {stopEvent: true});
	});
	
	function showMenu(e, t, o) {
		// First hide the active menu
		hideMenu();
		
		var inMenu = Ext.get(Ext.get(t).parent().id.replace('-link', '-menu'));
		inMenu.setWidth(menuContainer.getWidth());
		inMenu.alignTo(Ext.get(t), 'bl');
		inMenu.addClass('activeMenu');
		inMenu.show();
		
		doc.on('mouseover', handleOver, null, {buffer: 150});
		doc.on('mousedown', handleDown);
	}
	
	function hideMenu() {
		var activeMenu = Ext.get(Ext.DomQuery.selectNode('#menu-container .activeMenu'));
		if (activeMenu) {
			activeMenu.removeClass('activeMenu');
			activeMenu.hide();
			
			doc.un('mouseover', handleOver);
			doc.un('mousedown', handleDown);
		}
	}
	
	var handleOver = function(e, t) {
		var activeMenu = Ext.get(Ext.DomQuery.selectNode('#menu-container .activeMenu'));
		if (activeMenu && t != activeMenu.dom && !e.within(menuContainer) && !e.within(activeMenu)) {
			hideMenu();
		}	
	};
	
	var handleDown = function(e) {
		var activeMenu = Ext.get(Ext.DomQuery.selectNode('#menu-container .activeMenu'));
		if (activeMenu && !e.within(menuContainer) && !e.within(activeMenu)) {
			hideMenu();
		}
	}
	
	// Setup the sliding divs if there are any
	var slidingContainer = Ext.get('sliding-container');
	if (slidingContainer) {
		var wrapper = slidingContainer.wrap({tag: 'div', style: 'height: 425px; overflow: hidden;'});
		
		var nodes = Ext.DomQuery.select('#sliding-container > div');
		for (var i = 0; i <= nodes.length; i++) {
			var node = Ext.get(nodes[i]);
			if (node) {
				node.setStyle({'background-color': '#fff', 'position': 'relative', 'width': '870px'});
				
				if (node.prev()) {
					node.alignTo(node.prev(), 'tr');
				}
				
				if (node.prev()) {
					var prevButton = Ext.get(Ext.DomHelper.append(node, {tag: 'div', html: '<a class="arrow-left" href="javascript: scrollContent(' + (i - 1) * 870 + ');">Prev</a>'}));
					//prevButton.alignTo(node, 'bl');
					prevButton.setStyle({'position': 'absolute'});
					if(bName == "Microsoft Internet Explorer" && bVer == 6){
						prevButton.moveTo(node.getLeft(), node.getBottom());
					} else {
						prevButton.moveTo(node.getLeft(), node.getBottom() - prevButton.getHeight());
					}
				}
				if (node.next()) {
					var nextButton = Ext.get(Ext.DomHelper.append(node, {tag: 'div', html: '<a class="arrow-right" href="javascript: scrollContent(' + (i + 1) * 870 + ');">Next</a>'}));
					nextButton.setStyle({'position': 'absolute'});
					if(bName == "Microsoft Internet Explorer" && bVer == 6){
						nextButton.moveTo(800, 400);
					} else {
						nextButton.moveTo(node.getRight() - nextButton.getWidth(), node.getBottom() - nextButton.getHeight());	
					}
				}
			}
		}
	}
});
// Function to scroll content inside of the sliding container
function scrollContent(id) {
	Ext.get('sliding-container').scrollTo('left', id, true);
}