(function($){
    $.ToggleContent = function(el, options){
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;
        
        // Access to jQuery and DOM versions of element
        base.$el = $(el); // jQuery
        base.el = el;     // Dom
        
        // Add a reverse reference to the DOM object
        base.$el.data("ToggleContent", base);
        
        base.init = function(){
            
            base.options = $.extend({},$.ToggleContent.defaultOptions, options);
			
			
			//assign option pageWrapper to function level variable
			new_page_wrapper = base.options.pageWrapper[0];
			new_drop_down = base.options.objDropdown[0];
			new_drop_wapper = base.options.objDropWrapper[0];
            
            // Put your initialization code here
			
			// bind click event to base jQuery object
			// normally a.drop
			base.$el.click(function(){ base.initDropdown(); return false;})
					.siblings(new_drop_wapper)
					.children(new_drop_down).hide(); // hide all active neighbouring drop downs
			
			// live the expansion/contraction to option var objDropdown 
			//$(base.options.objDropdown[0]).live('showDropdown', function(e){ base.loadDropdown(); });
			
			// bind the expansion/contraction to option var objDropdown
			// bind event handler
			// add mega drop down functionality to UL LI menu
			// wraps <ul class="mega"></ul> in <div class="wrap"></div> on show
			base.$el.siblings().bind('showDropdown', function(){ base.loadDropdown();});	
			
        };   
		
		// Method call loacDropdown
		base.initDropdown = function(){
			
			//fire event handler toggleContent object
			if(base.$el.siblings('ul').attr('id')){
				base.$el.siblings('ul').trigger('showDropdown');
			}else if(base.$el.siblings('div').children('ul').attr('id')){
				base.$el.siblings('div').children('ul').trigger('showDropdown');
			}		
			
			
			// bind hide behaviour to #site-wrapper div
			if(new_page_wrapper){
				
				//place on click bevhavior to background <div id="site-wrapper"></div>
				$(new_page_wrapper).click(function() { 
					//Hide the all menus if visible 
					base.$el.siblings(new_drop_wapper).children(new_drop_down)
							.removeClass('shown')
							.hide()
							.unwrap();
					base.$el.removeClass('active');
					base.$el.data("shown","no");
				});
			}
			
			return false;
		}
		
		base.loadDropdown = function(){			
			
			//if the current objects menu is shown then hide it
			if(base.$el.data("shown") == 'yes'){
				
				base.$el.siblings(new_drop_wapper).children(new_drop_down)
					.removeClass('shown') 				// remove shown class
					.hide()               				// hide
					.unwrap();           				// remove <div class="wrap"> from <ul class="mega">
				base.$el.removeClass('active');
				base.$el.data("shown","no");
				
			//if the current objects menu is hidden then show it	
			}else{
				
				//make sure that any other mega drop down is hidden and is set to hidden on all classes and data
				$("li a.drop:not(#"+base.$el.attr('id')+")").removeClass('active').data("shown","no");
				$(new_drop_down+":not(#"+base.$el.siblings(new_drop_down).attr('id')+")").removeClass('shown');
				$('div.wrap').children(new_drop_down).hide().css({top: '-330px',left: '0px'}).unwrap();
				
				//show the current drop down
				base.$el.siblings(new_drop_down)
					.show()                             // show
					.addClass('shown')                  // add class
					.wrap('<div class="wrap"></div>');  // wrap <ul class="mega"> with <div class="wrap">
				base.$el.addClass('active');            // add class <a class="drop">
				base.$el.data("shown","yes");
				
			}
			
		}
		
        
        // Run initializer
        base.init();
    };
    
    $.ToggleContent.defaultOptions = {
		pageWrapper: ["#site-wrapper"],
		objDropdown: ["ul.mega"],
		objDropWrapper: ["div.wrap"]
    };
    
    $.fn.toggleContent = function(options){
        return this.each(function(){
            (new $.ToggleContent(this, options));
        });
    };
    
    // This function breaks the chain, but returns
    // the ToggleContent if it has been attached to the object.
    $.fn.getToggleContent = function(){
        this.data("ToggleContent");
    };
    
})(jQuery);