var Menu = new Class({
	Implements: [Options, Events],

	options: {
		onOpen: Class.empty
	},

	initialize: function(options){
		this.setOptions(options);
		this.items = {};

		var _item = {
			'id': 'home',
			'opened': false,
			'element': $('logo')
		}
		_item.element.addEvent('click', function(){
			this.open_home();
		}.bind(this));
		
		$$(".menu-item-l1").each(function(item, i){

			var _item = {
				'id': item.id,
				'opened': false,
				'element': item,
				'fx': null
			}
			_item.element.setStyle('width', 209);
			_item.fx = new Fx.Morph(item, {link: 'cancel', duration: 500, transition: Fx.Transitions.Sine.easeOut, onComplete: function(item){
				if(item.opened){
					item.element.setStyle('overflow', 'visible');
					var childs = item.element.getChildren();
					for(var i=1; i<childs.length; i++){
						childs[i].setStyle('display', 'block');
					}
				}
				this._check_state.delay(2000, this);
			}.bind(this).pass(_item)});
			item.addEvent('mouseenter', this._open_l1.bind(this).pass(_item));
			item.addEvent('mouseleave', this._close_l1.pass(_item));
			item.getElement('div.menu-item').addEvent('click', function(item){
				this.open(item);
			}.bind(this).pass(_item.id));
			this.items[_item.id] = _item;

			var index = i;
			var parent = _item.id;

			item.getElements(".menu-item-l2").each(function(item){

				var _item = {
					'id': item.id,
					'opened': false,
					'element': item,
					'fx': null,
					'offset': index * 34,
					'parent': parent
				}

				_item.fx = new Fx.Morph(item, {link: 'cancel', duration: 250, transition: Fx.Transitions.Sine.easeOut});
				item.addEvent('mouseenter', this._open_l2.bind(this).pass(_item));
				item.addEvent('mouseleave', this._close_l2.pass(_item));
				item.getElement('div.menu-subitem').addEvent('click', function(item){
					this.open(item);
				}.bind(this).pass(_item.id));
		
				this.items[_item.id] = _item;
				
			}.bind(this));

		}, this);
	},

	_close_all: function(){
		for(var it in this.items){
			if(!this.items[it].parent && this.items[it].opened) {
				this._close_l1(this.items[it]);
			}
		}
	},

	open_home: function(){
		this.current = 'home';
		this._close_all();
		this.fireEvent('open', 'l1-home');
	},

	_open_l1: function(item, fn){
		if(item.opened) return false;

		this._close_all();

		var fn = ($type(fn) == 'function') ? fn: Class.empty;

		var childs = item.element.getChildren();
		for(var i=1; i<childs.length; i++){
			childs[i].setStyle('display', 'none');
		}
		
		item.element.setStyle('overflow', 'hidden');
		var w = item.element.clientWidth;
		var m = parseInt(item.element.getStyle('margin-left'));
		item.fx.start({
			'width': [w, 930],
			'margin-left': [m, 22]
		}).chain(fn);
		item.opened = true;
		return true;
	},

	_close_l1: function(item){
		var childs = item.element.getChildren();
		for(var i=1; i<childs.length; i++){
			childs[i].setStyle('display', 'none');
		}
		item.element.setStyle('overflow', 'hidden');
		var w = item.element.clientWidth;
		var m = parseInt(item.element.getStyle('margin-left'));
		item.fx.start({
			'width': [w, 209],
			'margin-left': [m, 0]
		});
		item.opened = false;
	},

	_open_l2: function(item){
		var res = this._open_l1(this.items[item.parent], function(item){
			if(item.opened) return;
			item.fx.start({
				'top': [0, -item.offset],
				'height': [26, 100]
			});
			item.opened = true;
		}.pass(item));
		if(!res){
			if(item.opened) return;
			item.fx.start({
				'top': [0, -item.offset],
				'height': [26, 100]
			});
			item.opened = true;
		}		
	},

	_close_l2: function(item){
		item.fx.start({
			'top': [-item.offset, 0],
			'height': [100, 26]
		});
		item.opened = false;
	},

	open: function(item, fire){
		var fire = $defined(fire)? fire : true;
		
		if(this.items[item].parent) this._open_l2(this.items[item]);
		else this._open_l1(this.items[item]);
		this.current = item;

		if(fire) this.fireEvent('open', item);
	},

	init: function(fragment){
		if(fragment == 'home') {
			this.open_home();
			return;
		}
		if(this.items['l1-'+fragment]) {
			this.open('l1-'+fragment);
			return;
		}
		if(this.items['l2-'+fragment]) {
			this.open('l2-'+fragment);
			return;
		}
	},

	_check_state: function(){
		var opened = false;
		for(var item in this.items){
			if(!this.items[item].parent) {
				opened = opened || this.items[item].opened;
			}
		}
		if(this.current == 'home') return;
		if(!opened && this.current) this.open(this.current, false);
		
	}

});


var Content = new Class({

	initialize: function(){
		this.items = {};
		this.current = null;

		$$('.content').each(function(item){
			var _item = {
				'element': item,
				'opened': false,
				'fx': null
			}
			_item.fx = new Fx.Tween(item, {property: 'opacity', link: 'cancel', duration: 150, transition: Fx.Transitions.Sine.easeOut, onStart: function(item){
				$('footer').setStyle('top', -100000);
				if(item.opened) {
					item.element.setStyles({
						'top': 279,
						'opacity': 1
					});
				}else{
					item.element.setStyles({
						'top': 279,
						'opacity': 0
					});
				}
			}.pass(_item), onComplete: function(item){
				if(item.opened){
					item.element.setStyles({
						'top': -100000,
						'opacity': 0
					});
					item.opened = false;
				}else{
					item.element.setStyles({
						'top': 279,
						'opacity': 1
					});
					item.opened = true;
					var offset = item.element.offsetTop + item.element.clientHeight;
					$('footer').setStyle('top', offset);
				}
			}.pass(_item)});
			item.setStyles({
				'position': 'absolute',
				'top': -10000,
				'left': '50%',
				'margin-left': -465
			});
			this.items[item.id] = _item;
			
		}, this);


	},

	open: function(id){
		if(this.items[id]){
			if(this.items[id].opened) return;

			if(this.current) {
				this.close(this.current, function(item){
					item.fx.start(0, 1);
				}.pass(this.items[id]));
			}else{
				this.items[id].fx.start(0, 1);
			}
			this.current = id;
		}
	},

	close: function(id, fn){
		if(this.items[id]){
			var fn = ($type(fn) == 'function') ? fn: Class.empty;
			this.items[id].fx.start(1, 0).chain(fn);
		}
	}
});


window.addEvent('domready', function(){
	var uri = new URI(document.location.href);
	var fragment = uri.get('fragment');
	var query = "?" + (uri.get('query') || '');
	var req = null;

	var content = new Content();
	var menu = new Menu({onOpen: function(item){
		if(req) req.cancel();
		var c = item.substring(3)
		
		if(c == "cnxlabs"){
			req = new Request({url: "article.php"+query, onComplete: function(){
				try{
					
					var el = $("cnxlabs-content");
					while(el.childNodes.length>0){
						el.removeChild(el.childNodes[0]);
					}
					
					el = document.createElement("div");
					el.innerHTML = this.response.text;
					$("cnxlabs-content").appendChild(el);

				}catch(e){
					alert(e.message);
				}
				content.open(item.substring(3));
			}}).get();
		}else{
			content.open(item.substring(3));
		}
		
		//content.open(item.substring(3));
	}});
	
	/*
	var map = new GMap2(document.getElementById("gmap"));
	map.setCenter(new GLatLng(42.673664426103315, 23.356997966766357), 16);
	
	map.setMapType(G_NORMAL_MAP);
	map.addControl(new GSmallMapControl());
	map.disableDoubleClickZoom();
	
	var marker_icon = new GIcon();
	marker_icon.image = "http://www.conquex.com/sysimages/marker_icon_1.png";
	marker_icon.iconSize = new GSize(32, 51);
	marker_icon.shadow = "http://www.conquex.com/images/marker_shadow.png";
	marker_icon.shadowSize = new GSize(58, 51);
	marker_icon.iconAnchor = new GPoint(0, 51);
	marker_icon.infoWindowAnchor = new GPoint(25, 5);
	
	var marker = new GMarker(new GLatLng(42.67367231422446, 23.356826305389404), {icon: marker_icon});
	var tabs = new Array(
		new GInfoWindowTab('Адрес',  '<div class="pub_bubble">xxx</div>'),
		new GInfoWindowTab('Контакти',  '<div class="pub_bubble">xxxxx</div>')
	);
	marker.bindInfoWindowTabsHtml(tabs);
	map.addOverlay(marker);
	marker.openInfoWindowTabsHtml(tabs);
	map_inited = true;
	*/
	

	
	if(!fragment) fragment = 'home';
	if(fragment) menu.init(fragment);
});