var $j = jQuery.noConflict();

$j(document).ready(function() {
	
	/**
	 * Puts the #text-search label as value for input box. (for cleaner mark up)
	 * Use like this.. setInputFieldValueFromLabel($j('label[@for="text-search"]').html(), '#text-search');
	 *
	 * @param 	{object}		labelContent 	The label content
	 * @param 	{object}		inputFieldId 	The id of the target input field
	 * @return 	{void}
	 */
	$j.fn.setInputFieldValueFromLabel = function(labelContent, inputFieldId){
		$j(inputFieldId).val(labelContent).css('color', '#aaa');
		
		$j(inputFieldId).blur(function(){
			if($j(inputFieldId).val() == ''){
				$j(inputFieldId).val(labelContent).css('color', '#aaa');
			}
		});
		
		$j(inputFieldId).focus(function(){
			if($j(inputFieldId).val() == labelContent){
				$j(inputFieldId).val('');
			}
		});
	}
	
	
	$j('#product-custom-message').focus(function(e){
		if (this.value == this.defaultValue)
			this.value = ''; 
	});
	$j('#product-custom-message').blur(function(e){
		if (this.value == '') 
			this.value = this.defaultValue;
	});

	$j('#product-custom-message').keyup(function(e){
		var str = this.value;
		str = str.replace(/[^[a-zA-Z0-9]*/g, '');
		this.value = str;
	});

	/**
	 * Fix to be able to use css attribute selector for <td headers="something"> in Intercrap Explorer 6
	 * 
	 * Example:
	 * Write like this in your main stylesheet: td[headers="something"]{some-attribute: some-value;}
	 * And then do a normal class in your ie6 stylesheet: td.something{some-attribute: some-value;}
	 */
	if($j.browser.msie && $j.browser.version.substr(0,3) == '6.0'){
		if(document.body.getElementsByTagName('td').length > 0){
			for(i = 0; i < document.body.getElementsByTagName('td').length; i++){
				var header = new String(document.body.getElementsByTagName('td')[i].getAttribute('headers'));
				if(header != ''){
					document.body.getElementsByTagName('td')[i].setAttribute('className', header);
				}
			}
		}
	}
	
	
//Cart highlighting
(function($j) {

	$j.extend({
		add2cart: function(source_id, target_id, callback) {
			var source = $j('#' + source_id );
			var target = $j('#' + target_id );
			
			var shadow = $j('#' + source_id + '_shadow');
			if( !shadow.attr('id') ) {
				$j('body').prepend('<div id="'+source.attr('id')+'_shadow" style="display: none; background-color: #ddd; border: solid 1px darkgray; position: static; top: 0px; z-index: 505;">&nbsp;</div>');
				var shadow = $j('#'+source.attr('id')+'_shadow');
			}
			
			if( !shadow ) {
				alert('Cannot create the shadow div');
			}
			
			shadow
				.width(source.css('width'))
				.height(source.css('height'))
				.css('top', source.offset().top)
				.css('left', source.offset().left)
				.css('opacity', 0.5)
				.show();
			shadow
				.css('position', 'absolute');
		  
			shadow
				.animate({ 
					width: target.innerWidth(), 
					height: target.innerHeight(), 
					top: target.offset().top, 
					left: target.offset().left
				}, { 
					duration: 700,
					complete: function () {
						shadow.animate({ 
							opacity: 0 
						}, { 
							duration: 100, 
							complete: function () {
								shadow.remove();
								callback(); 
							}
						});
					}
				 });
			/*
			*/
		}
	});
})(jQuery);	

	
	
	

	
	

	
});