window.addEvent('domready', function() {

	var Overlay = new Class({
		
		Implements: [Options,Events],
		
		options:  {
			id: 'overlay',
			color: '#000',
			duration: 500,
			opacity: 0.5,
			zIndex: 5000/*,
			onClick: $empty,
			onClose: $empty,
			onHide: $empty,
			onOpen: $empty,
			onShow: $empty
			*/
		},
		
		initialize: function(container,options) {
			this.setOptions(options);
			this.container = document.id(container);
			this.overlay = new Element('div',{
				id: this.options.id,
				opacity: 0,
				styles: {
					position: 'absolute',
					background: this.options.color,
					left: 0,
					top: 0,
					'z-index': this.options.zIndex
				},
				events: {
					click: function() {
						this.fireEvent('click');
					}.bind(this)
				}
			}).inject(this.container);
			this.tween = new Fx.Tween(this.overlay,{ 
				duration: this.options.duration,
				link: 'cancel',
				property: 'opacity',
				onStart: function() {
					var size = this.container.getScrollSize();
					this.overlay.setStyles({
						width: size.x,
						height: size.y
					});
				}.bind(this),
				onComplete: function() {
					this.fireEvent(this.overlay.get('opacity') == this.options.opacity ? 'show' : 'hide');
				}.bind(this)
			});
		},
		open: function() {
			this.fireEvent('open');
			this.tween.start(this.options.opacity);
		},
		close: function() {
			this.fireEvent('close');
			this.tween.start(0);
		}
	});
	
	var loginOverlay = new Overlay(document.body,{
		id: 'overlay',
		color: '#000',
		duration: 300,
		opacity: 0.7,
		onClick: function() {
			//$$('embed').setStyle('visibility','visible');
			document.getElementById('mainPlayer').style.visibility = 'visible'; 
			$$('div.loginBox').tween('opacity', [1, 0.0]);
			this.close();
		},
		onShow: function() {
			//getElementByID('videoButton').style.visibility = 'hidden';
			document.getElementById('mainPlayer').style.visibility = 'hidden'; 
	
			//$$('embed').setStyle('visibility','hidden');
			//make ajax call while the overlay is happening...?
			//var Request = new Request()....
			var myLoginBox = $$('div.loginBox');
			myLoginBox.tween('opacity', [0.0, 1]);
		}
	});
	
	var chaptersOverlay = new Overlay(document.body,{
		id: 'overlay',
		color: '#000',
		duration: 300,
		opacity: 0.7,
		onClick: function() {
			document.getElementById('mainPlayer').style.visibility = 'visible'; 
			$$('div.chaptersBox').tween('opacity', [1, 0.0]);
			this.close();
		},
		onShow: function() {
			document.getElementById('mainPlayer').style.visibility = 'hidden'; 
			//make ajax call while the overlay is happening...?
			//var Request = new Request()....
			$$('div.chaptersBox').tween('opacity', [0.0, 1]);
		}
	});

	var videoVeil = new Overlay(document.body,{
		id: 'videoVeil',
		color: '#000',
		duration: 300,
		opacity: 0.7,
		onClick: function() {
			this.close();
		},
		onShow: function() {
		}
		});
	
		$$('popOut').addEvents({
			mousedown: function(){
			document.getElementById('mainPlayer').sendEvent('STOP');
			//setTimeout(function() { $('mainPlayer') }, 500);
			}
		});
	
		$$('lowerLights').addEvents({
		mousedown: function(){
		$('mainPlayer').wmode = "Window";
		videoVeil.open();
		}
	});

	$$('img.mo').each(function(img) {
		var src = img.getProperty('src');
		var extension = src.substring(src.lastIndexOf('.'),src.length)
		img.addEvent('mouseenter', function() { img.setProperty('src',src.replace(extension,'-mo' + extension)); });
		img.addEvent('mouseleave', function() { img.setProperty('src',src); });
	});

	var el = $$('div.toc'),
        color = el.getStyle('backgroundColor');
 
    $$('div.toc').addEvents({
        mouseenter: function(){
            this.morph({
    	        'background-color': '#E2FFD7',
                'background-image': 'url(images/bullet.gif)',
                'background-repeat': 'no-repeat',
                'background-position': [0, 320],
                //'border': '1px solid #bbb',
				'padding-left': '25'
            });
		},
        mouseleave: function(){
            this.morph({
                //'border': '1px solid #ddd',
				'background-position': [320, 0],
                'background-image': 'url(header/images/login_06.jpg)',
				'background-repeat': 'repeat',
                backgroundColor: color,
				'padding-left': '5'
            });
        },
		mousedown: function(){
		//var posx = this.get('id');
		//console.log(posx);
		//scroller.scrollToVerticalPosition(posx);
		//scroller.update();
	}

	});
	
	var el = $$('div.toc2'),
        color = el.getStyle('backgroundColor');
 
    $$('div.toc2').addEvents({
        mouseenter: function(){
            this.morph({
    	        'background-color': '#E2FFD7',
                'background-image': 'url(images/bullet.gif)',
                'background-repeat': 'no-repeat',
                'background-position': [0, 507],
                //'border': '1px solid #bbb',
				'padding-left': '25'
            });
		},
        mouseleave: function(){
            this.morph({
                //'border': '1px solid #ddd',
				'background-position': [507, 0],
                'background-image': 'url(header/images/login_06.jpg)',
				'background-repeat': 'repeat',
                backgroundColor: color,
				'padding-left': '5'
            });
        },
		mousedown: function(){
		//var posx = this.get('id');
		//console.log(posx);
		//scroller.scrollToVerticalPosition(posx);
		//scroller.update();
	}

	});


	//a few settings
	var labelColor = '#000', restingPosition = 5;
	//for every form field
	$$('form#login .slider label').each(function(label){
		//set the label enhancements into place
		label.setStyles({
			color: labelColor,
			position: 'absolute',
			top: 2,
			left: restingPosition,
			display: 'inline',
			'z-index': 99
		});
		//get input value
		var input = label.getNext('input');
		//grab label width, add resting position value
		var width = label.getSize().x;
		var move = width + restingPosition;
		//onload, check if a field is filled out, if so, move the label out of the way
		if(input.get('value') !== '') {
			label.tween('left',0 - move);
		}
		// if the input is empty on focus move the label to the left
		// if it's empty on blur, move it back
		input.addEvents({
			focus: function() {
				if(input.get('value') == '') {
					label.tween('left',0 - move);
				}
				else {
					label.setStyle('left',0 - move);
				}
			},
			blur: function() {
				if(input.get('value') == ''){
					label.tween('left',restingPosition);
				}
			}
		});
	});
	
	
	//var test = $$('div.videoButton').getElement('img.highlight');
	//var src = test.get('src');
	//
	/*
    $$('div.videoButton').addEvents({
        mouseenter: function(){
			this.getElement('img.highlight').setProperty('src','video/images/video-button_04-mo.png');
			//this.
			//console.log('got it '+ src );
		},
        mouseleave: function(){
            this.getElement('img.highlight').setProperty('src','video/images/video-button_04.png');
	}

	});*/
	
 



	
    $$('div.chaptersButton').addEvents({
		mousedown: function(){
		chaptersOverlay.open();
	}
	});
	
    $$('div.chaptersBoxChapter').addEvents({
        mouseenter: function(){
            this.morph({
				'background-image': 'none',
    	        'background-color': '#E2FFD7'
            });
		},
        mouseleave: function(){
            this.morph({
                //'border': '1px solid #ddd',
				'background-color': '#FFFFFF',
                'background-image': 'url(video/images/chapters_bg.jpg)'
            });
		},
		mousedown: function(){
			setTimeout(function() { $('mainPlayer').sendEvent('SEEK', 92); }, 500);
			$$('embed').setStyle('visibility','visible');
			$$('div.chaptersBox').tween('opacity', [1, 0.0]);
			chaptersOverlay.close();
		//chaptersOverlay.open();
	}
	});
	
	//a few settings
	var labelColor = '#000', restingPosition = 5;
	//for every form field
	$$('form#contactForm .slider label').each(function(label){
		//set the label enhancements into place
		label.setStyles({
			color: labelColor,
			position: 'absolute',
			top: 2,
			left: restingPosition,
			display: 'inline',
			'z-index': 99
		});
		//get input value
		var input = label.getNext('input');
		//grab label width, add resting position value
		var width = label.getSize().x;
		var move = width + restingPosition;
		//onload, check if a field is filled out, if so, move the label out of the way
		if(input.get('value') !== '') {
			label.tween('left',0 - move);
		}
		// if the input is empty on focus move the label to the left
		// if it's empty on blur, move it back
		input.addEvents({
			focus: function() {
				if(input.get('value') == '') {
					label.tween('left',0 - move);
				}
				else {
					label.setStyle('left',0 - move);
				}
			},
			blur: function() {
				if(input.get('value') == ''){
					label.tween('left',restingPosition);
				}
			}
		});
	});
});