/**
 * 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
 *
 **/

//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().css("opacity", .3 );
				$(".note1").show().css("opacity", 1 );
				$(".note2").show().css("opacity", .3 );
			},
			function(){
				$(".note").hide();
				$(".note1").hide();
				$(".note2").hide();
			}
		);

		addnoteevents();
		
		$(window).resize(function () {
			$(".note").remove();
			$(".note1").remove();
			$(".note2").remove();
			$(".note_flash").remove();

			imgOffset = $(image).offset();

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

			addnoteevents();

		});
	} 
	
	function addnoteevents() {
		$('.note').hover(
			function(){
				$(".note").show().css("opacity", .1 );
				$(".note1").show().css("opacity", .1 );
				$(".note2").show().css("opacity", .1 );
				$(this).css("opacity", 1 );
				$(this).next().next(".note1").css("opacity", 1 );
				$(this).next(".notep").show();
				$(this).next(".notep").css("z-index", 10000);
				$(this).next(".notep").css("opacity", .9 );
			},
			function(){
				$(".note").show().css("opacity", .5 );
				$(".note1").show().css("opacity", 1 );
				$(".note2").show().css("opacity", .3 );
				$(this).next(".notep").hide();
				$(this).next(".notep").css("z-index", 0);
			}
		);
		$('.note').click(
			function(){
				var NewLink= $(this).attr("rel");
				window.location.href = NewLink;
			});
	}


	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;
		
		flash_left = parseInt(imgOffset.left) +20;
		flash_top = parseInt(imgOffset.top) +315;
		
		note_area_div = $("<div class='note'></div>").css({ left: note_left + 'px', top: note_top + 'px', width: note_data.width + 'px', height: note_data.height + 'px' }).attr('rel', 'browse/category/'+note_data.rel );
		note_text_div = $('<div class="notep" >'+note_data.note+'</div>').css({ left: note_left + 'px', top: note_p_top + 'px'});

		// two extra divs to simulate flickr
		note_area_div1 = $("<div class='note1'></div>").css({ left: note_left + 1 + 'px', top: note_top + 1 + 'px', width: note_data.width - 2 + 'px', height: note_data.height - 2 + 'px' });
		note_area_div2 = $("<div class='note2'></div>").css({ left: note_left + 2 + 'px', top: note_top + 2 + 'px', width: note_data.width - 4 + 'px', height: note_data.height - 4 + 'px' });

		note_flash = $("<div class='note_flash'>This image has clickable notes. Hover to reveal the hotspots.</div>").css({ left: flash_left, top: flash_top, width: '450px' });
		
		$("body").append(note_area_div);
		$("body").append(note_text_div);

		// two extra divs to simulate flickr
		$("body").append(note_area_div1);
		$("body").append(note_area_div2);

		$("body").append(note_flash);
	}

// End the closure
})(jQuery);

notes = [{"x1":"146","y1":"86","height":"70","width":"70","note":"GS-3046 | Rail Mount QD Socket","rel":"mounts/picatinny-rail-mounts/"}, {"x1":"198","y1":"163","height":"70","width":"70","note":"GS-3091 | Rail Mount Hand Stop","rel":"mounts/weapon-controls/"}, {"x1":"275","y1":"70","height":"98","width":"98","note":"GS-3101 | Surefire G2 Offset Mount","rel":"mounts/flashlight-mounts/"}, {"x1":"225","y1":"113","height":"43","width":"43","note":"BP-4DE | Tango Down Rail Cover","rel":"rail-covers/"}];

$(window).load(function(){
	$('#cover').imgNotes();
	$(".note").show().delay(1000).fadeTo(600,0);
	$(".note1").show().delay(1000).fadeTo(600,0);
	$(".note2").show().delay(1000).fadeTo(600,0);
		
	setTimeout(function(){
		$(".note_flash").show().css("opacity", .01 ).fadeTo(1000,.05);
		}, 2200 ); 
	}
);