/*
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: '#3bf510',
				//'border-bottom': '1px solid #000',
				//'font-family': 'Arial, Helvetica, sans-serif',
				//'text-align': 'center',
				//'font-color': 'InfoText',
				//'font-size': '12px',
				//'margin-bottom': '20px',
				//top: 0,
				//left: 0,
				//cursor: 'pointer',
				//position: 'relative',//fixed
				width: window.getSize().x,
				display: 'none'
			},
			contentStyles: {
				padding: 7
			},
			stylesHover: {
				//background: 'Highlight'
			},
			//infoIcon: '/images/activebar-information.png',
			//closeButton: '/images/activebar-closebtn.png',

			html: 'You are using an unsupported browser. '
				+'Please use <a href="http://www.getfirefox.com">Firefox</a> or a newer version of <a href="http://www.microsoft.com/ie">Internet Explorer</a>.<span style="font-size: smaller;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Don&#8217;t show me this message again.</span>',
			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();
			}
			if (Cookie.read('stopIE6Bar') != 'off'){
				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 id="IE6Message"',{
				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;
		},

		close: function(permanent){
			this.fireEvent('close', this.bar);
			if (permanent){
				Cookie.write('stopIE6Bar', 'off', {duration:7});
			}
		}
	});

	var stopIE6Bar = new stopIE6(this,options);
	var dontShowButton = $(stopIE6Bar.bar.getElementsByTagName('span')[0]);
	dontShowButton.addEvent('click', function()
	{
		stopIE6Bar.close(true);
	});
	return stopIE6Bar;
});