var nav = Class.create({
		initialize:function(container, color){
			this.container = container;
			this.color = color;
			window.onresize = this.draw.bind(this);
			this.letters = [
				{
					letter:'G',
					page:'index.php',
					button:'home',
					buttonMarginLeft : ''
				},
				{
					letter:'E',
					page:'about.php',
					button:'about',
					marginLeft : '-0.75%',
					buttonMarginLeft : '-14%'
				},
				{
					letter:'R',
					page:'',
					button:'',
					marginLeft : '-1.9%',
					buttonMarginLeft : ''
				},
				{
					letter:'R',
					page:'music.php',
					button:'music',
					marginLeft : '-0.1%',
					buttonMarginLeft : '5%'
				},
				{
					letter:'I',
					page:'',
					button:'',
					marginLeft : '0.3%',
					buttonMarginLeft : ''
				},
				{
					letter:'T',
					page:'video.php',
					button:'video',
					marginLeft : '-0.7%',
					buttonMarginLeft : '-5%'
				},
				{
					letter:'D',
					page:'',
					button:'',
					marginLeft : '-1.7%',
					buttonMarginLeft : ''
				},
				{
					letter:'E',
					page:'live.php',
					button:'live',
					marginLeft : '-0.3%',
					buttonMarginLeft : '-22%'
				},
				{
					letter:'B',
					page:'sip.php',
					button:'sip',
					marginLeft : '-5.3%',
					buttonMarginLeft : '15%'
				},
				{
					letter:'O',
					page:'',
					button:'',
					marginLeft : '-4.6%',
					extraStyle:'margin-top:-0.5%',
					buttonMarginLeft : ''
				},
				{
					letter:'E',
					page:'contact.php',
					button:'contact',
					marginLeft : '-1.2%',
					buttonMarginLeft : '-18%'
				},
				{
					letter:'R',
					page:'',
					button:'',
					marginLeft : '-2.1%',
					buttonMarginLeft : ''
				}
			];
		},
		
		load : function(){
			var preloadContainer = new Element('div', {className:'preloader'});
			preloadContainer.hide();
			$(document.body).insert(preloadContainer);
			var sizes = [1024,1280,1440,1680,1920];
			sizes.each(
				(function(size){
					this.letters.each(
						(function(letter){
							var img = new Element('img', {src:'/images/logo/' + this.color +'/' + size + '/' + letter.letter + ".png"});
							preloadContainer.insert(img);
							if (letter.button){
								var img = new Element('img', {src:'/images/buttons/' + this.color +'/' + size + '/' + letter.button + ".png"});
								preloadContainer.insert(img);
							}
						}).bind(this)
					)
				}).bind(this)
			)
			this.checkPreload();
		},
		
		checkPreload : function(){
			var ok = true;
			$$('.preloader img').each(
				function(elem){
					if (!elem.complete) {
						ok = false;
					}
				}
			)
			if (!ok){
				var func = (function(){
					this.checkPreload();
				}).bind(this)
				setTimeout(func, 200);
				return;	
			}
			this.draw();
		},
		
		getSize : function(){
			var screenWidth = $(document.body).getWidth();
			if (screenWidth < 1260){
				return 1024;
			}
			if (screenWidth < 1420){
				return 1280;
			}
			if (screenWidth < 1660){
				return 1440;
			}
			if (screenWidth < 1900){
				return 1680;
			}
			return 1920;
		},
		
		draw : function(){
			this.size = this.getSize();
			this.container.update('');
			this.letters.each(this.drawLetter.bind(this));
			this.container.setStyle('width:'+this.size+'px;');
			this.centerNav();
			if (aPlayer) aPlayer.maximize();

		},
		
		drawLetter : function(obj){
			var letterContainer = new Element('div', {className:'letter'});
			this.container.insert(letterContainer);
			var img = new Element('img', {src:'/images/logo/' + this.color +'/' + this.size + '/' + obj.letter + ".png", className:'letterImg'});
			letterContainer.insert(img);
			if (obj.marginLeft){
				if (obj.extraStyle){
					letterContainer.setStyle('margin-left:'+obj.marginLeft+";"+obj.extraStyle);
				}else{
					letterContainer.setStyle('margin-left:'+obj.marginLeft);
				}
			}
			if (obj.button){
				img.observe('mouseover', this.showButton.bind(this));
				img.observe('mouseout', this.hideButton.bind(this));
				img.metaInfo = obj;
				letterContainer.observe('click', this.goTo.bind(this));
				letterContainer.metaInfo = obj;
			}
		},
		
		goTo : function(e){
			var elem = e.element();
			var obj = elem.metaInfo;
			window.location.href="http://" + window.location.host + "/" + obj.page;
		},
		
		showButton : function(e){
			var elem = e.element();
			var obj = elem.metaInfo;
			obj.width = elem.getWidth();
			elem.src = '/images/buttons/' + this.color +'/' + this.size + '/' + obj.button + ".png"
			elem.parentNode.setStyle('width:' + obj.width + 'px;');
			elem.setStyle('margin-left:' +obj.buttonMarginLeft+';margin-top:0.10%;cursor:pointer;');
		},
		
		hideButton : function(e){
			var elem = e.element();
			var obj = elem.metaInfo;
			elem.src = '/images/logo/' + this.color +'/' + this.size + '/' + obj.letter + ".png"
			elem.setStyle('margin-left:0px;');
			elem.setStyle('margin-top:0px;');
			elem.setStyle('cursor:default;');
		},
		
		centerNav : function(){
			if (!Prototype.Browser.IE){
				var lastElem = $$('.letterImg')[$$('.letterImg').length-1];
				var farRight = parseInt(lastElem.offsetLeft) + parseInt(lastElem.getWidth()); 
				var screenWidth = parseInt($(document.body).getWidth());
				var diff = (screenWidth - farRight)/2;
				this.container.setStyle('margin-left:' + diff + 'px;');
			}
		}
		
		
	})