window["CIDimmer"] = (function() {
	var _config = {
		areas:["left", "top", "right", "bottom"],
		leftOpacity:80,
		rightOpacity:80,
		bottomOpacity:80,
		topOpacity:80,
		object:null,
		backgroundColor:"#000000"
	};
	var _old_onresize=window.onresize||function(){};
	var getComputedStyle = document.defaultView && document.defaultView.getComputedStyle;
	var _elements={};
	var _obj=null;
	var _showing=false;
	var _get=function(area){
		return _elements[_getName(area)];
	};
	var _set=function(elem,style,value){
		try{
			elem.style[style]=value;
		}catch(e){
			//alert(elem.id,style,value);
			
		}
	};
	var _onresize=function(){
		if(_showing){
			_dim();
			
		}
		_old_onresize();
	}
	window.onresize=function(){
		_onresize();
	}
	var _create=function(area,override){
		var name=_getName(area);
		if(!_elements[name] || override){
			var elem;
			if(_elements[name]){
				elem=_elements[name];
			}else{
				elem=document.createElement("div");
				elem.id=name;
				_elements[name]=elem;
				document.body.appendChild(elem);
			}
				
			
			
			_set(elem,"backgroundColor",_config.backgroundColor);
			_set(elem,"display","none");
			_set(elem,"margin","0px");
			_set(elem,"padding","0px");
			var opacity=(_config[area+"Opacity"]||80)/10;
			_set(elem,"opacity",opacity/10);
			_set(elem,"filter","alpha(opacity=" + opacity*10 + ")");
			_set(elem,"position","absolute");
			
			
			
		}
		
	};
	var _getName=function(area){
		return ["ci",area,"overlay"].join("-");
	};
	var _findPosition=function(elem){
		var left=0;
		var top=0;
		if(elem.offsetParent){
			while(1){
			
				left+=elem.offsetLeft;
				top+=elem.offsetTop;
				if(!elem.offsetParent){break;}
				elem=elem.offsetParent;
			}
		}else if(elem.x && elem.y){
			      left=elem.x;
			      top=elem.y;
		}
		
		return {left:left,top:top};
		
	};
	var _deminsions=function(elem,name){
		var check=name=="width"?[ "Left", "Right" ]:[ "Top", "Bottom" ];
		var val=name =="width"?elem.offsetWidth:elem.offsetHeight;
		for(var idx in check){
			
			val-=parseFloat(_getStyle(elem,"padding"+check[idx]))||0;
			
		}
		return val;
		
	};
	var _getStyle=function(elem,name){
		var ret;
		if(getComputedStyle){
			// Only "float" is needed here
			if ( /float/i.test( name ) )
				name = "float";

			name = name.replace( /([A-Z])/g, "-$1" ).toLowerCase();

			var computedStyle = elem.ownerDocument.defaultView.getComputedStyle( elem, null );

			if ( computedStyle )
				ret = computedStyle.getPropertyValue( name );

			// We should always get a number back from opacity
			if ( name == "opacity" && ret == "" )
				ret = "1";
		}else{
			var camelCase = name.replace(/\-(\w)/g, function(all, letter){
				return letter.toUpperCase();
			});

			ret = elem.currentStyle[ name ] || elem.currentStyle[ camelCase ];

			// From the awesome hack by Dean Edwards
			// http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291

			// If we"re not dealing with a regular pixel number
			// but a number that has a weird ending, we need to convert it to pixels
			if ( !/^\d+(px)?$/i.test( ret ) && /^\d/.test( ret ) ) {
				// Remember the original values
				var left = style.left, rsLeft = elem.runtimeStyle.left;

				// Put in the new values to get a computed value out
				elem.runtimeStyle.left = elem.currentStyle.left;
				style.left = ret || 0;
				ret = style.pixelLeft + "px";

				// Revert the changed values
				style.left = left;
				elem.runtimeStyle.left = rsLeft;
			}
		}
		ret;



	};
	var _windowSize=function(){
		var w=(window.innerWidth || document.body.clientWidth);
		var h=(window.innerHeight || document.body.clientHeight);
		
		return {width:w,height:h};
	};
	var _position=function(pos,area){
	
		var elem=_get(area);
		var offset;
		
			switch(area){
				case "top":
				_set(elem,"top",0+"px");
				_set(elem,"left","0px");
				_set(elem,"height",pos.top+"px");
				_set(elem,"width","100%");				
				break;
				case "bottom":
				offset=pos.top+_deminsions(_obj,"height");
				_set(elem,"top",offset+"px");
				_set(elem,"left","0px");
				_set(elem,"height",_windowSize().height-offset+"px");
				_set(elem,"width","100%");
				break;
				case "left":
				offset=pos.left;
				_set(elem,"top",pos.top+"px");
				_set(elem,"width",offset+"px");
				_set(elem,"left","0px");
				_set(elem,"height",_deminsions(_obj,"height")+"px");
				break;
				case "right":
				
				offset=pos.left+_deminsions(_obj,"width");				
				_set(elem,"left",offset+"px");
				_set(elem,"top",pos.top+"px");
				
				_set(elem,"width",_windowSize().width-offset+"px");
				_set(elem,"height",_deminsions(_obj,"height")+"px");
				break;
		}
	};
		var _dim=function() {
			var pos=_findPosition(_obj);
			for(var i=0;i<2;i++){
				for(var idx in _config.areas){
					_position(pos,_config.areas[idx]);
					_set(_get(_config.areas[idx]),"display","block");
				}
			}
			
		};
		var _undim=function() {
			for(var idx in _config.areas){
				_set(_get(_config.areas[idx]),"display","none");
			}
			
		};
	
	return {
		toggle:function(){
			if(!_showing){
				_dim();
			}else{
				_undim();
			}
			_showing=!_showing;
			
			
			return this;
		}
		,		
		init:function(config) {
			if(config.object){
				for (var key in config) {
					_config[key] = config[key];
					
				}
				
				for(var idx in _config.areas){				
					_create(_config.areas[idx],true);
					
				}
				_obj=document.getElementById(_config.object);
			}
			return this;
		}
	}
})();