function closeIntroOverlay(){
	$('home_overlay').destroy();	
}

var Template = new Class({
	Implements: Options,
	options: {
		'baseUrl' : '/',
		'menuColors' : {}
	},
	initialize: function( options ){
		this.ie6 = (navigator.userAgent.toLowerCase().indexOf('msie 6') != -1) && (navigator.userAgent.toLowerCase().indexOf('msie 7') == -1);
		
		this.setOptions(options);
		this.mkHomeAnim();
		if(!this.ie6){
			CSBfleXcroll('scroller');	
		}	
		this.centerWebsite(100);
		this.topMenu();
		this.mkLists();
	},
	mkLists: function(){
		var uls = $$('#scroller ul') || false;
		if(uls){
			uls.addClass('inited');
		}
		var lis = $$('#scroller li') || false;
		if(lis){
			var span = new Element('span', {
				'class' : 'bullet'				
			});
			lis.each(function(li){
				span.clone().inject(li, 'top');				
			});
		}
		
	},
	mkHomeAnim: function(){
		if(
			$(document.body).hasClass('home')
			&& $(document.body).hasClass('play_anim')
			&& !$(document.body).hasClass('products')
		){
			
			var overlay = new Element('div', {
				id : 'home_overlay',
				styles: {
					background: '#fff',
					width : '100%',
					height : '100%',
					position : 'absolute',
					top : 0,
					left : 0,
					'text-align' : 'center',
					'z-index' : 50
				},
				events: {
					click: function(e){
						closeIntroOverlay();
					}					
				}
			}).inject(document.body, 'top');
			
			var ctnr = new Element('div', {
				id : 'home_overlay_ctnr',
				styles: {
					background: '#fff',
					width : 960,
					height : 508,
					margin : '0 auto',
					'margin-top' : ( window.getSize().y - 490 ) / 2,
					position: 'relative'
				}
			}).inject(overlay);
			
			var obj = new Swiff(this.options.baseUrl+'files/flash/export_last.swf', {
			    width:  960, 
			    height: 508, 
			    container: ctnr
			});	
			
			var a = new Element('a', {
				text: 'skip intro',
				styles: {
					bottom: -20,
					left: 0,
					position: 'absolute',
					color: '#000000',
					cursor: 'pointer'
				}				
			}).inject(ctnr, 'bottom');		
			
			
		}
	},
	centerWebsite: function( delay ){
		var container = $('container');
		var body_height = window.getSize().y;
		var margin_top = (( window.getSize().y - container.getSize().y ) / 2) - 30;
		if(margin_top > 0){
			container.setStyle('margin-top', margin_top);
		}
		else{
			container.setStyle('margin-top', 0);
		}
		if( ! window.ie ){
			(function(){this.centerWebsite( delay );}.bind(this)).delay( delay );
		}
	},
	topMenu: function(){
		var div = $('main_menu').removeClass('not_inited');
		
		var span = new Element('span', {
			'id' : 'under_top_menu'
		}).inject(div);
		
		var spanEffect = new Fx.Morph(span, {
			duration: 'short', 
			wait: false
		});
		

		$extend(span, {
			defaultCoords: {
				x: -2,
				w: 0,
				c: 'transparent'
			},
			'move': function( coords ){
				spanEffect.start({
					'left' : coords.x,
					'width' : coords.w,
					'background-color' : coords.c
				});
			},
			'goBack': function(){
				this.move(this.defaultCoords);
			},
			'init': function(){
				span.setStyles({
					'left' : this.defaultCoords.x,
					'width' : this.defaultCoords.w,
					'background-color' : this.defaultCoords.c
				});				
			}
		});		
		
		
		var colors = new Hash(this.options.menuColors); 
		
		var links = div.getElements('li a');
		links.each(function(link, i){
			var position = link.getPosition(div);
			var size = link.getSize();
			var bgColor = colors[link.getParent('li').get('class')];
			
			if(link.hasClass('current')){
				var bodyClass = document.body.get('class');
				bodyClasses = bodyClass.split(' ');
				
				bodyClasses.each(function(bodyClass, i){
					if(colors.has(bodyClass)){
						span.defaultCoords = {
							x: position.x,
							w: size.x,
							c: colors[bodyClass]						
						};
						span.init();
					}
				});
			}
			else{	
				link.spanCoords = {
					x: position.x,
					w: size.x,
					c: bgColor					
				};
				link.addEvents({
					'mouseover': function(){
						span.move(this.spanCoords);
					},
					'mouseleave': function(){
						span.goBack();
					}
				});
			}
		});		
		
	}
});