/**
 * imgnotes jQuery plugin
 * version 0.1
 *
 * Copyright (c) 2008 Dr. Tarique Sani <tarique@sanisoft.com>
 *
 * Dual licensed under the MIT (MIT-LICENSE.txt) 
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 * @URL      http://www.sanisoft.com/blog/2008/05/26/img-notes-jquery-plugin/
 * @Example  example.html
 *
 **/
var Show = false;
//Wrap in a closure
(function($) {

	$.fn.imgNotes = function(n) {
	
	    	    	    
		if(undefined != n){
			notes = n;
		} 
        
		image = this;

		imgOffset = $(image).offset();	
		$(notes).each(function(){
			appendnote(this);
		});	
	
		$(image).hover(
			function(){			    			    
				$('.note').show();	
			},
			function(){			
				$('.note').hide();
			}
		);

		addnoteevents();
		
		$(window).resize(function () {
			$('.note').remove();

			imgOffset = $(image).offset();

			$(notes).each(function(){
				appendnote(this);				
			});

			addnoteevents();

		});
		
	} 
	
	function addnoteevents() {
	    
		$('.note').hover(
			function(){
				$('.note').show();
				$(this).next('.notep').show();
				$(this).next('.notep').css("z-index", 10000);
			},
			function(){
				$('.note').show();
				$(this).next('.notep').hide();
				$(this).next('.notep').css("z-index", 0);
			}
		);

		if (Editable)
		{		
		$('.note').click(
		    function(){		        

		        var IndexForRemove;
		        
				 for(var i = 0; i<notes.length; i++)	        
	             {		             	                
	                
	                if (this.id == notes[i].id)
	                {	                    
	                    var NewX1 = parseInt(this.style.left) - parseInt(imgOffset.left);
	                    var NewY1 = parseInt(this.style.top) - parseInt(imgOffset.top);
	                    var NewWidth = parseInt(this.style.width.replace("px",""));
	                    var NewHeight = parseInt(this.style.height.replace("px",""));	                    	                    	                    	                    
                        document.getElementById('ctl00_ContentPlaceHolder1_NoteText').value = document.getElementById('NoteText_'+notes[i].id).innerHTML;
	                    IndexForRemove = i;
	                    DeletedNote = notes[i];
	                }
	                
	                var noteAreaDiv = document.getElementById(notes[i].id);
	                var noteTextDiv = document.getElementById("comment"+notes[i].id);
                    
                    
                    noteAreaDiv.parentNode.removeChild(noteAreaDiv);
                    noteTextDiv.parentNode.removeChild(noteTextDiv);
	                
	                
	             }	    
	             	             
	             notes.splice(IndexForRemove,1);
	             $('#ctl00_ContentPlaceHolder1_tern').imgAreaSelect({ onSelectChange: showaddnote, x1: NewX1, y1: NewY1, x2: NewX1+NewWidth, y2: NewY1+NewHeight });				
		    }
		);
		}
		
	}


	function appendnote(note_data)
	{				    	    
		note_left  = parseInt(imgOffset.left) + parseInt(note_data.x1);
		note_top   = parseInt(imgOffset.top) + parseInt(note_data.y1);
		note_p_top = note_top + parseInt(note_data.height)+5;				
		
		var NoteTablePart1 = '<table border="0" cellpadding="0" cellspacing="0"><tr><td width="3" height="3" background="images/upload/comm_t1.gif"></td><td bgcolor="#eaeff2"></td><td width="3" height="3" background="images/upload/comm_t2.gif"></td></tr><tr><td bgcolor="#eaeff2"></td><td bgcolor="#eaeff2"><div style="margin-left:6px; margin-right:6px;" class="text31" id="NoteText_'+note_data.id+'">';
	    var NoteTablePart2 = '</div></td><td bgcolor="#eaeff2"></td></tr><tr><td width="3" height="3" background="images/upload/comm_b1.gif"></td><td bgcolor="#eaeff2"></td><td width="3" height="3" background="images/upload/comm_b2.gif"></td></tr></table>';
						
		//note_area_div = $("<div class='note'> <input type='button' value='button' /> </div>").css({ left: note_left + 'px', top: note_top + 'px', width: note_data.width + 'px', height: note_data.height + 'px' });				
		note_area_div = $("<div id='"+note_data.id+"'  class='note'> </div>").css({ left: note_left + 'px', top: note_top + 'px', width: note_data.width + 'px',height: note_data.height + 'px' });				
		
		note_text_div = $('<div id="comment'+note_data.id+'" class="notep" >'+NoteTablePart1+note_data.note+NoteTablePart2+'</div>').css({ left: note_left + 'px', top: note_p_top + 'px'});
		
		
        
        if (document.getElementById('comment'+note_data.id)==null)
        {            
            $('body').append(note_area_div);
    		$('body').append(note_text_div);    		    		
        }
        
	}

// End the closure
})(jQuery);