var gracefull = Class.create(DOMObject,
{
	initialize:function($super, root, instance_props)
	{
		var default_props = 
		{
			zIndex : 100000,
			coverBackgroundColor : '#DDDDE2',
			coverOpacity : .8,
			rootBackgroundColor : '#FFFFFF',
			rootBorderColor : '#CCCCCC',
		}
		$super(root, default_props, instance_props);
	},
	
	build:function()
	{
		var cover = $E({style : {position : 'fixed', top : '0px', left : '0px', width : '100%', height : '100%'}});
		var root = $E({style : {position : 'fixed', top : '100px', left : '50%', width : '400px', marginLeft : '-200px'}});
		var p = '/img/graceful/';
		
		var header_text = "To use gotProject, you will need another browser. Internet Explorer can't keep up with today's standards";
		var header_subText = "we recommend";
		
		$E({parent : root, inner : header_text, style : {padding : '20px', fontSize : '15px', lineHeight : '20px', textAlign : 'center'}});
		$E({parent : root, inner : header_subText, style : {padding : '10px', fontSize : '11px', fontStyle : 'italic', textAlign : 'center', color : '#AAAAAA'}});
		
		var holder = $E({parent : root, style : {height : '120px', padding : '0px 12px', margin : '20px 0px'}})
		this.buildBox(holder, {i : p + 'firefox.png', t : 'Firefox', u : 'http://www.mozilla.com/firefox/'});
		this.buildBox(holder, {i : p + 'safari.png', t : 'Safari', u : 'http://www.google.com/chrome/'});
		this.buildBox(holder, {i : p + 'chrome.png', t : 'Chrome', u : 'http://www.apple.com/safari/'});
		
		this.S('root', root);
		this.S('cover', cover);	
	},
	
	buildBox:function(parent, props)
	{
		var box_styles = {float : 'left', width : '100px', height : '20px', lineHeight : '20px', margin : '0px 12px', paddingTop :'100px', backgroundPosition : 'center top', backgroundRepeat : 'no-repeat', textAlign : 'center', fontSize : '11px', color : '#3E638F'};
		var box = $E({parent : parent, type : 'a', attr : {'href' : props.u}, inner : props.t, style : box_styles, styleE : {backgroundImage : 'url(' + props.i + ')'}});		
	},
	
	flush:function()
	{
		this.S('root').setStyle({zIndex : this.P('zIndex'), backgroundColor : this.P('rootBackgroundColor'), border : '1px solid ' + this.P('rootBorderColor')});
		this.S('cover').setStyle({zIndex : this.P('zIndex'), opacity : this.P('coverOpacity'), backgroundColor : this.P('coverBackgroundColor')});
	}
});

//bind main
function graceful_main()
{
	if(Prototype.Browser.IE)
	{
		new gracefull();
	}
}
Event.observe(window, "load", graceful_main);