/*
 * @author     Andrei Eftimie
 * @email      andrei@eftimie.ro
 * @copyright  Andrei Eftimie
 * @web        http://eftimie.com
 * 
 * Required Markup
 * ---------------
 * <input class="handler" type="radio" />
 * or
 * <input class="handler" type="checkbox" />                        //This is the handler
 *
 * <div class="content">[content]</div>                             //This is the content we wish to toggle relative to the handler
 * <div class="additionalContent">[additional content]</div>        //This is the additional content we wish to toggle opposed the the first content
 *
 * Calling
 * -------
 * $('.handler').toggleElement('.content');                         //Toggles '.content' relative to whether the handler is checked or not
 * or
 * $('.handler').toggleElement('.content', '.additionalContent');   //Toggles '.content' and '.additionalContent' one opposed to eachother
 *
 */

(function($){
	$.fn.toggleElement = function(content, additionalContent, options) {
	
		defaults = {
			visibility: false
		}
		
		options = $.extend(defaults, options);
		
	    return this.each(function() {
	    
	        handle = $(this);
	        if (content) {
	            content = $(content);
	        }
	        if (additionalContent) {
	            additionalContent = $(additionalContent);
	        }
	        	        
	        //Calls the toggle function on triggering the click, change and blur(for radio's) events
	        handle.bind('click change blur',
	            function(){ 
                    toggleElement($(this),content, additionalContent);
                });
	        
			//If the handle is a radio button, we also add events on his siblings, we we can untoggle when the others are selected
			if (handle.is(':radio')){
				var name = $(this).attr('name');
				$('input:radio[name='+name+']').not(handle).bind('click change blur',
					function(){
						if ($(this).is(':checked')) {
							toggleElement(handle, content, additionalContent);
						}
					});
			} 
			 
			    
            //Initially calling the function on domready
            $(function(){
               toggleElement(handle,content,additionalContent, true);
            });
            
		});
	
		function toggleElement(handle, content, additionalContent, instant){
			
			var speed = 'fast';
			if (instant == true) speed = 0;
			
			if (additionalContent) { 
					if (handle.is(':checked')) {
						additionalContent.fadeOut(speed,
							function(){
								//hack for visibility
								if (options.visibility) { additionalContent.show().css('visibility','hidden'); }
								content.fadeIn(speed);
							}
						);   
					} else {
						content.fadeOut(speed,
							function(){
								//hack for visibility
								if (options.visibility) { content.show().css('visibility','hidden'); }
								additionalContent.fadeIn(speed);
							}
						); 
					}
				
				} else {
					if (handle.is(':checked')) {
						if (options.visibility) { content.hide().css('visibility',''); }
						content.fadeIn(speed);
					} else {
						content.fadeOut(speed,
							function(){
								//hack for visibility
								if (options.visibility) { content.show().css('visibility','hidden'); }
							}
						);
					}
				};
		}
	};
	
})(jQuery);