(function($) {      
	$.fn.showhide = function(options) {
		
		var opts = $.extend({}, $.fn.showhide.defaults, options);
		// trackers
		var active_id = null;
		//example of expected HTML for a given target element
		var markup = '\r\n\r\n<div class="{item:\'X\'}">\r\n\</div>';
		
		return this.each(function() {
			
			
			//if the first occurance of the # in attr('href') is greater than zero then it is due to IE bug
			if($(this).attr('href').indexOf("#") > 0){
				//bug fix for IE miss hadnling of attr('href')
				// indexOf returns position of first #
				//substing returns the attr('href') string from the position of first #
				this.target_id = $($(this).attr('href').substring($(this).attr('href').indexOf("#")));				
			}else if($(this).attr('href').indexOf("#") == 0){
				this.target_id = $($(this).attr('href'));
			}else{
				//get the link extension to see if it's a valid img format
				link_extension = $(this).attr('href').substring($(this).attr('href').lastIndexOf(".")+1,$(this).attr('href').length);
			
				//get the number of img in the target id to generate a new id

				switch(link_extension.toLowerCase()){
					case "jpg":
					case "gif":
					case "png":
					case "bmp":			
						//count the number of image and then add one to use in a unique ID
						current_cnt = ($(opts.target+' img').length + 1);
						//create unique ID
						current_id = 'img-' + current_cnt;						
						
						//create an img with with the unique id
						//the img src is the href of the targeting link
						//add on meta data to show the image order and set the first img as visible
						$(document.createElement("img")).attr({ src: $(this).attr('href'), alt: $(this).attr('href'), id: current_id }).addClass("{item:'"+current_cnt+"'}").appendTo(opts.target);   
						
						//preload the image into the page
						preloadImages($(this).attr('href'));
						
						//give the current image an id
						this.target_id = $('#'+current_id);
					break;
				}
			}
			
			//only continue of the targeted ID exists on the page
			if(this.target_id.length > 0 ){
				
				//if the selected option is true then set the first target id panel to be visible
				if(typeof opts.selected == 'boolean' && opts.selected==true){
					
					if(jQuery.fn.metadata){
						//use meta data to find the first item on the page
						//and make it active
						data = this.target_id.metadata();
						if (data.item && data.item == '1' ){
							this.target_id.addClass('tgl-active');
							this.target_id.css("z-index","1000");
						}else{
							this.target_id.hide();
						}
					}else{
						alert('Please make sure that you are using the metadata plugin using the following meta data markup'+markup);					
					}
					
				//if the selected option is false then hide all target id panel
				}else if(typeof opts.selected == 'boolean' && opts.selected==false){
					this.target_id.hide();
				}
				//if the selected option is set to that of a specific id the make that id active
				else if(typeof opts.selected == 'string' && this.target_id.attr('id') == opts.selected){
					if(this.target_id == opts.selected){
						this.target_id.addClass('tgl-active');
						this.target_id.css("z-index","1000");
					}
				//hide all other ids
				}else{
					this.target_id.hide();
				}
				
				/**/
				//only show the target div if it has some content or has a src attr e.g. is an img
				if(this.target_id.html().length > 0 || this.target_id.attr('src').length > 0){ 
					
					switch(opts.event){				
						case "mouseover":
							$(this).mouseover(onEvent);
							$(this).click(function(){return false;});//make sure then any click events return false
						break;
						case "click":
							$(this).click(onEvent);
						break;
					}
				}
			}
		});
	
		//preload imgs onto the page
		//limitless arguments
		//e.g. preloadImages('/dir/img.jpg','new-img.gif')
		function preloadImages()
		{
		  for(var i = 0; i<arguments.length; i++)
		  {
			jQuery("<img>").attr("src", arguments[i]);
		  }
		}
		
		//preload imgs onto the page
		//limitless arguments
		//e.g. preloadImages('<strong>some content</strong>','<ul><li>new content</li></ul>')
		function preloadContent()
		{
		  for(var i = 0; i<arguments.length; i++)
		  {
			jQuery("<div>").html(arguments[i]);
		  }
		}
	
		function onEvent() {
			
			//remove slected class from all previously clicked
			$('a.showhide').each(function() {
				if($(this).hasClass('tgl-selected')){
					$(this).removeClass('tgl-selected');
				}
			});
			
			if(opts.animate==true){				
				//hide all sibling active divs, fade them out and take away the active class using chaining
				this.target_id.siblings(".tgl-active").hide().removeClass('tgl-active');
				this.target_id.fadeIn('slow');
			}else{
				//hide all sibling active divs, hide them and take away the active class using chaining
				this.target_id.siblings(".tgl-active").hide().removeClass('tgl-active');
				this.target_id.show();
			}			
			this.target_id.addClass('tgl-active');
			$(this).addClass('tgl-selected');//make sure any clicked link has a class called 'tgl-selected'
			this.target_id.css("z-index","1000");
		return false;
		}
	}
  
	$.fn.showhide.defaults = {
		animate: false,
		event: 'click',		
		selected: true,
		target: null,
		active_id:null
	}
})(jQuery);