// A few simple plugins that do cool effects.
(function($){

// Quickie jQuery drop shadows, based on http://alistapart.com/articles/onionskin/
// The outermost div needs some way to contract onto the original element: float, position:absolute, or
// fixing the width of both all work. attr is a hash to be applied to the outer div; some possiblilities include
// {className: 'class-with-appropriate-style'} , {id: 'ditto'}, {style: {float: 'left'}}, {style: {width: '100px'}}
// Need to remove any existing floatingness; floats inside floats look real weird.
$.fn.dropshadow = $.extend(function(opts){
  opts = $.extend({}, arguments.callee['default'], opts);
  return this.each(function(){
    var outerdiv = $.DIV(opts, ['div',{className: 'dropshadow1'},['div',{className: 'dropshadow2'}]]).addClass('dropshadow');
    this.oldFloat = $(this).css('float');
    $(this).css({float: 'none'}).wrap(outerdiv);
  });
},{ //option sets
  'default' : {},
  right:  {style: {float: 'right'}},
  left: {style: {float: 'left'}}
}); // dropshadow

$.fn.dropshadow = function(opts){
	if (opts == 'remove'){
	  return this.each(function(){
	    $(this).closest('div.dropshadow').replaceWith(this);
			$(this).css($.data(this,'dropshadow')); 
	  });
	}
	opts = $.extend({}, $.fn.defaults, opts);
	return this.each(function(){
		var $this = $(this), props = {}; // save the old properties for undoing
		$.each(['position', 'float', 'display', 'top', 'left'], function(){props[this] = $this.css(this.toString());});
		$.data(this, 'dropshadow', props);
		$this.wrap('<div class="dropshadow"/>').wrap('<div class="dropshadow1"/>').wrap('<div class="dropshadow2"/>');
		var top = $this.css('top'); if(isNaN(parseInt(top,10))) top = 'auto';
		var left = $this.css('left'); if(isNaN(parseInt(left,10))) left = 'auto';
		$this.closest('div.dropshadow').css({ // copied from effect.core.js from jQuery UI
			margin: opts.offset,
			'float': props['float'] || 'none',
			position: props['position'] == 'static' ? 'relative' : props['position'],
			top: top,
			left: left,
			'z-index': $this.css('z-index'),
			display: props['display'] == 'inline' ? 'inline-block' : props['display']
		});
		$this.closest('div.dropshadow2').css({'padding-right': 2*opts.offset, 'padding-bottom': 2*opts.offset});
		$this.css({position: 'relative', 'float': 'none', top: 0, left: 0});
	});
};
$.fn.defaults = {offset: 5};

// remove the drop shadow div's.
$.fn.undoDropShadow = function(){
  return this.each(function(){
    var shadow = $(this).parents('div.dropshadow');
    if (shadow.length == 0) return;
    shadow[0].parentNode.replaceChild(this, shadow[0]);
  });
}; // undoDropShadow 

// Quickie text-embossing, based on http://www.cssplay.co.uk/mozilla/shadow_text.html
// adds a 1-pixel black copy behind and one pixel above and left of the item.
// Options:
// light: {Boolean} If true, adds a 1-pixel white copy behind and one pixel below and right of the item. Default: false
// center; {Boolean} If true, centers the items in the container. Default: false (DO NOT set text-align:center, since IE and standards interpret them differently)
$.fn.emboss = $.extend(function(opts){
  opts = $.extend({}, arguments.callee['default'], opts);
  return this.each(function() {
    var textDir = 'left';
    var lightDir = 1; // this makes sure the apparent light comes from the left, no matter what the text dir is
    if ($(this).css('direction') == 'rtl'){
      textDir = 'right';
      lightDir = -1;
    }
    var w = $(this).width();
    // need margin of zero of we come up against the IE vs. standard box model problem
    // display: block allows the line to move up and down
    $(this).css({margin: '0', display: 'block'}).wrap ('<div style="position:relative;"></div>');
    $(this.parentNode).css('height', $(this).height()+'px');
    var center = opts.center ? ($(this).width()-w)/2-0.5 : 0; // distance to move to center it (when we switch to display:block it fills the container
    var shadow=this.cloneNode(true);
    $(this)
      .before($(shadow).css({color: 'black',position: 'absolute', top: '-1px'}).css(textDir, (center-lightDir)+'px'))
      .css({position: 'absolute', top: '0'}).css(textDir, (center)+'px');
    if (opts.light){
      var light=this.cloneNode(true);
      $(this).before($(light).css({color: 'white',position: 'absolute', top: '1px'}).css(textDir, (center+lightDir)+'px'));
    }
  });
},{ // option sets
  'default' : {light: false, center: false},
  center: {center: true},
  light: {light: true}
}); // emboss
})(jQuery); // end custom alias

