/**
 * jQuery slidingdoor plugin
 * This jQuery plugin was inspired by a tutorial by Queness, located at
 * http://www.queness.com/post/620/create-a-stunning-sliding-door-effect-with-jquery
 * and coded from scratch by me.  Mine is less stunning but maybe more practical?  :)
 * @name jquery-slidingdoor-0.3.js
 * @author Frank DeRosa - http://surreal-dreams.com
 * @version 0.3
 * @date March 9, 2010
 * @category jQuery plugin
 * @copyright (c) 2010 Frank DeRosa (surreal-dreams.com)
 * @license GPL http://www.gnu.org/licenses/gpl.html
 * @example Visit http://surreal-dreams.com/jquery-plugins-and-stuff/slidingdoors-plugin/
 *  for more informations about this jQuery plugin
 */



(function($) {
	$.fn.slidingDoor = function(settings) {

		//default settings - don't like them?  Set your own, I won't mind.
		settings = jQuery.extend({
			openSpeed : 200,
			//time for the doors to open, in milliseconds
			closeSpeed : 500,
			//time for the doors to close, in milliseconds
			openWidth : .9,
			//the percentage of the total image width that the doors will slide
			opacity : .20,
			//how transparent will the doors be at the end?  1 is opaque, 0 is transparent.
			linkText : 'click here'
			//If there's a link, this text appears.  You could replace it with an img tag.
		}, settings);

		this.each(function(){
			if($(this).is('img'))
			{
				//we have an image
				var height = $(this).css('height');
				var width = $(this).width();
				//snag the dimensions of the image

				var leftWidth = width / 2;
				if(width % 2 != 0)
				{
					leftWidth += .5;
				}
				var rightWidth = width - leftWidth;
				//This gets the width of the two halves, even if the width is and odd width.
				//widths need to be integer amounts, so this handles that.

				width = width + 'px';
				leftWidth = leftWidth + 'px';
				rightWidth = rightWidth + 'px';
				//add the 'px' to the widths because CSS needs a unit

				var src = $(this).attr('src');
				var alt = $(this).attr('alt');
				//grab the images alt text and src

				var slideIndex = $(this).css('z-index');
				if(slideIndex == 'auto') {
					slideIndex = 10;
				}
				else
				{
					slideIndex += 10;
				}
				//set the z-index so it's higher than the image's z-index, or the sliding doors will be hidden

				var anchor = '';

				if($(this).parent().is('a'))
				{
					//is the parent a link?  If so, add it to the new sliding door container
					anchor = '<p><a href="' + $(this).parent().attr('href') + '" class="' + $(this).parent().attr('class') + '">' + settings.linkText + '</a></p>';
					$(this).parent().insertBefore($(this).html());
				}
				//set up the anchor text, or a blank "dummy"

				$(this).wrap('<div class="slidingDoorContainer" style="height: ' + height + '; width: ' + width +'; display: inline-block; overflow: visible; position: relative;"></div>')
				//wrap it in a div of equal size, inline like an image
				.parent()
				//change selected element to the new div
				.append('<div style="height: ' + height + '; width: ' + leftWidth +'; position: absolute; top: 0; left: 0; background: url(' + src + ') no-repeat left; z-index: slideIndex;"></div>')
				.append('<div style="height: ' + height + '; width: ' + rightWidth +'; position: absolute; top: 0; left: ' + leftWidth + '; background: url(' + src + ') no-repeat right; z-index: slideIndex;"></div>')
				//add on the two "sliding door" halves
				.append('<p>' + alt + '</p>')
				//add in the alt text
				.append(anchor);
				//add in the anchor, if there is one


				//time to add the hover event to the new wrapper div
				$(this).parent()
				.hover(function(){
					//mouseover function
					var div1Width = $(this).children('div:nth-child(1)').width();
					//get the width of the left side for later

					$(this).children('div:nth-child(1)')
					//select the left div
					.stop()
					//stop any ongoing animation
					.animate({
						left : (-.5 * settings.openWidth * $(this).width()),
						opacity : settings.opacity
					}, settings.openSpeed);
					//animate it - slide it left, make it translucent.

					$(this).children('div:nth-child(2)')
					//select the right div
					.stop()
					//stop any ongoing animation
					.animate({
						left : (.5 * settings.openWidth * $(this).width() + div1Width),
						opacity : settings.opacity
					}, settings.openSpeed);
					//animate it - slide it right, make it translucent.

				},
				function(){
					//mouseout function

					var div1Width = $(this).children('div:nth-child(1)').width();
					//calculate that width again (it's a different scope so it has to be done again)

					$(this).children('div:nth-child(1)')
					//select the left div
					.stop()
					//stop any ongoing animation
					.animate({
						left : 0,
						opacity : 1
					}, settings.closeSpeed);
					//animate it - slide it right, make it opaque.

					$(this).children('div:nth-child(2)')
					.stop()
					//stop any ongoing animation
					.animate({
						left : div1Width,
						opacity : 1
					}, settings.closeSpeed);
					//animate it - slide it left, make it opaque.
				});

				$(this).remove();
				//The image is no longer needed - time to remove it.

			}
		});


		return this;
		//done - return the wrapped set
	}
})(jQuery);