var Etlap = Class.create({

	initialize: function() 
	{
		$('content-wrap').hide();
		this.wrap = new Element('div', {id: 'etlap-wrap'});
		$('content-wrap').up().insert(this.wrap);
		this.categoryDiv = new Element('div', {'class': 'categories'});
		this.wrap.insert(this.categoryDiv);
		
		this.menuWindow = new Element('div', {'class': 'menuWindow'});
		this.wrap.insert(this.menuWindow);
			
		this.createSlideShow();
		this.createCategories();
		this.createControlButtons();
		this.addEventListeners();
		this.init();
	},
	
	
	createSlideShow: function()
	{
		this.slideshow = new Element('div');
		this.slideshow.setStyle({position: 'absolute', top: '0px', left: '0px'});
		this.menuWindow.insert(this.slideshow);
		var elements = $('content-wrap').childElements();

		this.pages = 0;
		latest = null;
		this.categories = new Array();
		
		for (i=0; i<elements.length; i++)
		{
			current = elements[i];
			if (current.tagName == 'H2')
			{
				this.categories.push({name: current.innerHTML, page: this.pages});
				
				this.pages++;
				newWidth = this.pages * 343;
				this.slideshow.setStyle({width: newWidth + 'px'});
				this.slideshow.insert(latest = new Element('div', {'class': 'menuWindowPage'}).update(current));
			}

			else
			{
				latest.insert(current);
				if (latest.getHeight() > 280)
				{
					// Visszavonjuk az előző műveletet, nyitunk egy új lapot, és oda szúrjuk be
					latest.childElements().pop();

					this.pages++;
					newWidth = this.pages * 343;
					this.slideshow.setStyle({width: newWidth + 'px'});
					this.slideshow.insert(latest = new Element('div', {'class': 'menuWindowPage'}).update(current));
				}
			}
		}
	},
	
	
	createControlButtons: function()
	{
		this.controlsWrap = new Element('div', {'class': 'controlsWrap'});
		this.wrap.insert(this.controlsWrap);
		this.controlsWrap.insert(this.backButton = new Element('a', {'class': 'menu-left'}));
		this.controlsWrap.insert(this.forwardButton = new Element('a', {'class': 'menu-right'}));
	},
	

	categoryClick: function(n)
	{
		this.page = n;
		this.animate();
	},


	createCategories: function()
	{
		var treeUL = new Element('ul');
		var li;
		for (var i=0; i<this.categories.length; i++)
		{
			a = new Element('a').update(this.categories[i].name);
			a.observe('click', function(){
				this.categoryClick($A(arguments)[1]);
			}.bindAsEventListener(this, this.categories[i].page));
			li = new Element('li').update(a);
			treeUL.insert(li);
		}
		this.categoryDiv.insert(treeUL);
	},
		
	
	addEventListeners: function()
	{
		this.backButton.observe('click', function(){
			if (this.page == 0)
				return;
			this.page--;
			this.animate();
		}.bindAsEventListener(this));

		this.forwardButton.observe('click', function(){
			if (this.page == this.pages-1)
				return;
			this.page++;
			this.animate();
		}.bindAsEventListener(this));

		Event.observe(window, 'keypress', function(e){
			if (e.keyCode == Event.KEY_RIGHT)
			{
				if (this.page == this.pages-1)
					return;
				this.page++;
				this.animate();
			}
			if (e.keyCode == Event.KEY_LEFT)
			{
				if (this.page == 0)
					return;
				this.page--;
				this.animate();
			}
		}.bindAsEventListener(this));
	},


	init: function()
	{
		this.page = 0;
		this.animate();
	},
	
	
	animate: function()
	{
		left = -1 * this.page * 343;

		duration = 0.2;
		new Effect.Move (this.slideshow, {x: left, y:0, mode:'absolute', duration: duration});
		
		if (this.page == 0)
			this.backButton.addClassName('opaque');
		else
			this.backButton.removeClassName('opaque');

		if (this.page == this.pages-1)
			this.forwardButton.addClassName('opaque');
		else
			this.forwardButton.removeClassName('opaque');
	}

});



document.observe('dom:loaded', function(){
	new Etlap();
});