// This code is based on mootools 1.11
// It is copyright to DatabaseDev.co.uk
// It was written by Marc of defraction.net!


Site = new Class({
	initialize: function() {
		this.columnOne = $('columnOne');
		this.columnTwo = $('columnTwo');
		this.prepareMenu();
		this.injectController();
		if(Cookie.get('menuHidden')) this.menuCloseSet();
	},
	injectController: function() {
		var self = this;
		this.controller = new Element('div').setProperty('id', 'menuControl').injectInside(this.columnTwo).addEvent('click', function(e) {
			var e = new Event(e).stop();
			if(this.hasClass('menuClosed')) {
				self.menuOpen();
			} else {
				self.menuClose();
			}
		});
		// Now let's adjust some widths cos they're wrong if the user has javascript and thus the box there
		this.columnTwo.setStyle('width', '630px');
		this.boxElements.setStyles('left: 15px; width: 605px;');
	},
	prepareMenu: function() {
		new Asset.image('images/menuTitleOver.gif'); // Preload
		var titles = $$('#newMenu h3.title').setStyle('cursor', 'pointer'); // Look like a link
		var nested = $$('#newMenu ul.newMenuSub');
		var state = Cookie.get('dbMenuState');
		var menu = new Accordion(titles, nested, {display:state, alwaysHide:true});
		menu.addEvent('onActive', function() {
			Cookie.set('dbMenuState', this.previous); // Use previous cos it indexes from 1 but Accordion.display indexes from 0 ;)
		});
		menu.addEvent('onBackground', function(e) {
			if(this.togglers[this.previous] == e) Cookie.set('dbMenuState', false); // Don't display if it's been closed baby
		});
		titles.addEvent('mouseenter', function() {
			this.setStyle('background-image', 'url(images/menuTitleOver.gif)');
		}).addEvent('mouseleave', function() {
			this.setStyle('background-image', 'url(images/menuTitle.gif)');
		});
		// Prepare the fx
		this.columnOne.fx = new Fx.Style(this.columnOne, 'width');
		this.columnTwo.fx = new Fx.Style(this.columnTwo, 'width');
		this.boxElements = this.columnTwo.getElements('div.box');
		this.boxElements.each(function(el) {
			el.fx = new Fx.Style(el, 'width');
		});
	},
	menuOpen: function() {
		$('menuControl').setStyle('background-image', 'url(images/menuClose.gif)');
		this.columnTwo.fx.start(630).chain(function() {
			this.columnOne.fx.start(175);
		}.bind(this));
		
		this.boxElements.each(function(el) {
			el.fx.start(605);
		});
		this.controller.removeClass('menuClosed');
		Cookie.remove('menuHidden');
	},
	menuClose: function() {
		$('menuControl').setStyle('background-image', 'url(images/menuOpen.gif)');
		this.columnOne.fx.start(0).chain(function() {
			this.columnTwo.fx.start(805);
		}.bind(this));
		
		this.boxElements.each(function(el) {
			el.fx.start(770);
		});
		this.controller.addClass('menuClosed');
		Cookie.set('menuHidden', true);
	},
	menuCloseSet: function() {
		$('menuControl').setStyle('background-image', 'url(images/menuOpen.gif)');
		this.columnOne.fx.set(0);
		this.columnTwo.fx.set(805);
		this.boxElements.each(function(el) {
			el.fx.set(770);
		});
		this.controller.addClass('menuClosed');
		Cookie.set('menuHidden', true);
	}
});

window.addEvent('domready', function() {	
	var theSite = new Site();
});