/*
Script: stopIE6.js
	Add an info bar at the top of your document.

License:
	MIT-style license.

Authors:
	Arian Stolwijk
*/

Element.implement('stopIE6',function(options){
	
	var stopIE6 = new Class({
		
		Implements: [Options,Events],
		
		options: {
			styles: {
		        background: 'InfoBackground',
				'border-bottom': '1px solid #c8c8c8',
				'font-family': 'Bitstream Vera Sans,verdana,sans-serif',
				'font-color': 'InfoText',
				'font-size': '12px',
				top: 0,
				left: 0,
				cursor: 'pointer',
				position: 'fixed',
				width: window.getSize().x,
				display: 'none'
			},
			contentStyles: {
				padding: 7
			},
			stylesHover: {
				background: 'Highlight'
			},
	        infoIcon: 'images/activebar-information.png',
	        closeButton: 'images/activebar-closebtn.png',

			html: 'The version of Internet Explorer you are currently using'
				+'is highly out-dated. It is strongly recommended to update to <a href="http://www.microsoft.com/ie">IE 8</a>, '
				+'<a href="http://www.getfirefox.com">Firefox</a>, <a href="http://www.opera.com/browser/">Opera</a> '
				+'or <a href="http://www.google.com/chrome">Google Chrome</a> ',
			ie6: Browser.Engine.trident && Browser.Engine.version <= 4,
			onClick: null,

			onOpen: function(bar){
				bar.setStyle('display','block');
			},
			onClose: function(bar){
				bar.setStyle('display','none');
			}
	    },
		
		initialize: function(elmt,options){
			this.parent = elmt;
			this.setOptions(options);
			
			if($type(elmt.retrieve('stopIE6Bar')) == 'element'){
				elmt.retrieve('stopIE6Bar').dispose();
			}
			this.bar = this.createBar();
			this.fireEvent('open',this.bar);
			elmt.store('stopIE6Bar',this.bar);
		},
		
		createBar: function(){
			var options = this.options;
			
			// Create the bar
			var bar = new Element('div',{
				styles: options.styles,
				events: {					
					mouseover: function(){
						var args = $H(options.stylesHover).getKeys();
						var styles = this.getStyles.run(args,this);
						this.store('origStyles',styles);
						this.setStyles(options.stylesHover);
					},
					mouseout: function(){
						this.setStyles(this.retrieve('origStyles'));
					}
				}
			}).inject(this.parent,'top');
			if(options.onClick){
				bar.addEvent('click',options.onClick);
			}
			
			// Add the bars text
			if ($type(options.html) == 'element') {
				var content = options.html
					.inject(bar)
					.setStyles(options.contentStyles);
			} else {
				var content = new Element('div', {
					styles: options.contentStyles,
					html: options.html
				}).inject(bar)
			}

			/* IE6 doesn't support position:fixed, so fix it, again */
			if(options.ie6 && bar.getStyle('position') == 'fixed'){				
				bar.setStyle('position','absolute');
				window.addEvent('scroll',function(){					
					bar.setStyles({
						top: this.parent.getScroll().y,
						left: this.parent.getScroll().x
					});
					
				});
			}
			
			// Make sure the bar is still 100% of the screen
			if(options.styles.width == window.getSize().x){
				window.addEvent('resize',function(){
					bar.setStyle('width',window.getSize().x);
				});
			}
			
			// Add info icon
			if(options.infoIcon){
				new Element('img',{
					src: options.infoIcon,
					align: 'left',
					styles: {
						'padding-right': 4
					}
				}).inject(content,'top');
			}
			
			// Add close button
			if(options.closeButton){
				new Element('img',{
					src: options.closeButton,
					align: 'right',
					styles: {
						'padding-left': 4
					},
					events: {
						click: function(event){
							event.stop();
							this.fireEvent('close',bar);
						}.bind(this)
					}
				}).inject(content,'top');
			}

			return bar;
		}
		
	});
	
	return new stopIE6(this,options);
});