(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>';
		
		if(opts.closer_img != null){
			var closer = '<div class="closer" style="cursor:pointer;position:absolute;bottom:20px;left:5px;"><img src="'+opts.closer_img+'" alt="close" /></div>';
		}else{
			var closer = '<div class="closer" style="cursor:pointer;position:absolute;bottom:20px;left:5px;">Hide [X]</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","99");
							
							//append a closing link and attach action to it
							if(typeof opts.show_closer == 'boolean' && opts.show_closer==true){
								this.target_id.append(closer);
							}
							
							//only call draggable object if it exists
							if(jQuery.fn.draggable){
								
								var current_id = this.target_id.attr('id');
								
								//apply starting position to given id
								if(typeof opts.show_closer == 'boolean' && opts.show_closer==true){
									$('div.closer').click(function() { resetPosition(current_id); });
								}
							
								this.target_id.draggable({ cursor: 'crosshair'});
								this.target_id.data("right",this.target_id.css('right')).data("top",this.target_id.css('top'));
							}
							
						}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","99");
						
						//append a closing link and attach action to it
						if(typeof opts.show_closer == 'boolean' && opts.show_closer==true){
							this.target_id.append(closer);
						}
						
						//only call draggable object if it exists
						if(jQuery.fn.draggable){
							
							var current_id = this.target_id.attr('id');
								
							//apply starting position to given id
							if(typeof opts.show_closer == 'boolean' && opts.show_closer==true){
								$('div.closer').click(function() { resetPosition(current_id); });
							}
							
							this.target_id.draggable({ cursor: 'crosshair'});
							this.target_id.data("right",this.target_id.css('right')).data("top",this.target_id.css('top'));
						}
					}
				//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 resetPosition(current_id) {
			//alert(current_id);
			if(opts.animate==true){	
				//close hide the div
				$('#'+current_id).hide();
			}else{
				//close hide the div
				$('#'+current_id).hide();
			}
					
			//only reposition the div if draggable object if it exists
			if(jQuery.fn.draggable){
				$('#'+current_id).css({
					"left": 'auto',
					"right": $('#'+current_id).data("right"),
					"top": $('#'+current_id).data("top")
				});
				if($('#'+current_id+' #dragger')){
					$('#'+current_id+' #dragger').remove();
				}
			}
		  	return true;
		}
	
		function onEvent() {
			
			//assign div id to temp var
			var tmp_current_id = this.target_id.attr('id');
			
			//remove slected class from all previously clicked
			$('a.showhide').each(function() {
				if($(this).hasClass('tgl-selected')){
					$(this).removeClass('tgl-selected');
					if($('div.closer').length > 0){
						$('div.closer').remove();
					}
				}
			});
			
			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').css("z-index", 1);
				
					
				this.target_id.fadeIn('slow').css("z-index", 99);
				
				//only call draggable object if it exists
				if(jQuery.fn.draggable){
					
					//remove any dragger div that is inplace within the target id
					if($('#'+tmp_current_id+' #dragger')){
						$('#'+tmp_current_id+' #dragger').remove();
					}
					
					this.target_id.draggable({ 
						cursor: 'move',
						drag: function(event, ui) {
							$(this).children().each(function() {
						
								if($(this).attr('class') == 'wrapper'){								
									$(this).css({'border-style':'dashed'});
								}
							});
						},
						stop: function(event, ui) {
							$(this).children().each(function() {
						
								if($(this).attr('class') == 'wrapper'){								
									$(this).css({'border-style':'solid'});
								}
							});
						}

					});
					
					this.target_id.data("right",this.target_id.css('right')).data("top",this.target_id.css('top'));
					
					
					this.target_id.children().each(function() {
						
						if($(this).attr('class') == 'wrapper'){
							
							var draggable_color = '#000000';
							
							if($(this).css('border-top-color')){
								var draggable_color = $(this).css('border-top-color');
							}
							
							$(this).before('<div id="dragger" style="width:100%;height:15px;background-color:'+draggable_color+';border:1px solid '+draggable_color+';cursor:move;"');
							$(this).mouseover(function(){
								/*$(this).css({'border-style':'dashed','border-width':'1px'});*/
								if(jQuery.fn.dropShadow){
									$(this).dropShadow({left: 8, top: 8, blur: 3, opacity: 0.5});
								}
							});
							$(this).mouseout(function(){
								/*$(this).css({'border-style':'solid','border-width':'1px'});*/
								if(jQuery.fn.dropShadow){
									$(".dropShadow").hide();
								}
							});
						}
						
					});
				}
				
			}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().css("z-index", 99);
				
				//only call draggable object if it exists
				if(jQuery.fn.draggable){
					this.target_id.draggable({ cursor: 'crosshair'});
				}
;
			}

			this.target_id.addClass('tgl-active');
			$(this).addClass('tgl-selected');//make sure any clicked link has a class called 'tgl-selected'
			
			
			
			//append a closing link and attach action to it
			if(typeof opts.show_closer == 'boolean' && opts.show_closer==true){
				this.target_id.append(closer);
			}
			
			//only call draggable object if it exists
			if(jQuery.fn.draggable){
							
				var current_id = this.target_id.attr('id');
								
				//apply starting position to given id
				if(typeof opts.show_closer == 'boolean' && opts.show_closer==true){
					$('div.closer').click(function() { resetPosition(current_id); });
				}
			}
			
		return false;
		}
	}
  
	$.fn.showhide.defaults = {
		animate: false,
		event: 'click',		
		selected: true,
		target: null,
		active_id:null,
		closer_img:null,
		show_closer:true
	}
})(jQuery);