//////////////////////////////////////////////////////////////////////////////////////////////////
/*  sLswatch v1.0 - 4:40 PM 13/03/2007
//////////////////////////////////////////////////////////////////////////////////////////////////
	@author: kc@slajax.com
	@gives a mouse over preview of the swatch color contained in the target element
			var sLswatchOpts = {		
					swClass:'.SwatchTable', // the swatches class
					swColorTag:'background-color', // the tag property that transfers the hex code
					swPrevId: 'swPreview', // the id of the preview element
					swDuration: 1000 // load in duration
					};	
*/
//////////////////////////////////////////////////////////////////////////////////////////////////
// init options - edit these for your purposes
//////////////////////////////////////////////////////////////////////////////////////////////////

window.addEvent('domready', function(){
		var sLswatchOpts = {		
					swClass:'.SwatchTable', // the swatches class
					swColorTag:'background-color', // the tag property that transfers the hex code
					swPrevId: 'swPreview', // the id of the preview element
					swDuration: 1000 // load in duration
					};	
		var swatch = new sLswatch(sLswatchOpts);
});

//////////////////////////////////////////////////////////////////////////////////////////////////
// class - no editing below this line
//////////////////////////////////////////////////////////////////////////////////////////////////
var sLswatch = new Class({
		initialize:function(options){
			this.setOptions(options);
			this.gatherSw(options);
		},
		setOptions:function(options){
			this.options = Object.extend({ }, options || {} );
		},
		gatherSw:function(options){
			$$(options.swClass).each(function(el){
					$(el).addEvent('mouseover', function(event){
							this.preview(el, event, true, options);	
						}.bind(this) );
					$(el).addEvent('mouseout', function(event){
							this.preview(el, event, false, options);	
						}.bind(this) );
			}.bind(this));
		},
		preview:function(el, event, evt, options){
			if (evt) { 		
				var bg = $(el).getStyle(options.swColorTag);

				if(!window.ie){
					var x = parseInt(eval(event.pageX-0))+'px';
					var y = parseInt(eval(event.pageY-50))+'px';
				}else{
					var x = parseInt(eval(event.clientX+document.documentElement.scrollLeft))+'px';
					var y = parseInt(eval(event.clientY+document.documentElement.scrollTop))+'px';
				}
				
				this.container = new Element('div');
				this.container.id = options.swPrevId;				
				this.container.setStyles({
										'position':'absolute',
										'width':'50px',
										'height':'50px',
										'border':'1px solid #000000',
										'zIndex':'1000',
										'left':x,
										'margin-top':y,
										'background-color': bg,
										'opacity':'0'
											});
											
				this.container.injectBefore($$('div')[0]);
				var containerFx = new Fx.Style(this.container, 'opacity', {duration:options.swDuration});
					containerFx.start(0, 1);
					
			}else{		this.container.remove()   }
			
		
		}
});