// transform 2.1 for jQuery 1.3+
// Copyright (c) 2010 Jack Moore - jack@colorpowered.com
// Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php

// transform creates a 2nd layer on top of the selected element.
// This layer is faded in and out to create the effect.  The orignal, bottom layer
// has it's class set to 'hover' and remains that way for the duration to
// keep the CSS :hover state from being apparent when the object is moused-over.
(function ($, window) {

    $.fn.transform = function (newClass, speed, callback) {
		var $this = this,
		background = 'background',
		padding = 'padding',
		properties = [
		    background + 'Color',
		    background + 'Image',
		    background + 'Repeat',
		    background + 'Attachment',
		    background + 'Position', // Standards browsers
		    background + 'PositionX', // IE only
		    background + 'PositionY', // IE only
			padding + 'Top',
			padding + 'Left',
			padding + 'Right',
			padding + 'Bottom',
			'height'
		];
		
		newClass = newClass || $.fn.transform.newClass;
		speed = parseInt(speed, 10) || $.fn.transform.speed;
		callback = callback || $.fn.transform.callback;
		
		// 1. Check to see if the jQuery object contains elements.
		// 2. Check to see if the effect has already been applied
		// 3. Check to see that the visitor is not using FireFox 2
		// or lower due to a bug that does not allow JavaScript to retrieve the CSS background position.
		// More info: https://bugzilla.mozilla.org/show_bug.cgi?id=316981
		if ($this[0] && !$this.find('.jstransform')[0] && !($.browser.mozilla && parseFloat($.browser.version) < 1.9)) {
			
			$this.each(function () {
				
				
				var base = this,
				
				i,
				style = base.currentStyle || window.getComputedStyle(base, null),
				layer = '<span style="position:absolute;top:0;left:0;display:block; width: 630px;" class="tmp"/>',
				$content = $(layer),
				$hover = $(layer);
				
				if (base.style.position !== 'absolute') {
					base.style.position = 'relative';
				}
				
				
				for (i = 0; properties[i]; i += 1) {
					if (style[properties[i]]) {
						$hover[0].style[properties[i]] = $content[0].style[properties[i]] = style[properties[i]];
					}
				}
				
				 
				$content[0].style.backgroundImage = $content[0].style.backgroundColor = '';
				
				
				
				$(base).prepend($content).removeClass().addClass(newClass).prepend($hover);
				

						$hover.stop().fadeTo(speed, 0, function () {

							//$(base).removeClass();
							
							//$(base).removeClass();
							//alert(newClass);
								//$(base).addClass(newClass);
								//alert("lekker");
								
								//remove($content);
								//alert($content);

						});

			});
		}
		
		return $this;
	};
	
	$.fn.transform.speed = 400;
	$.fn.transform.callback = null;
	
}(jQuery, this));