/**
* 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();
        //			},
        //			function() {
        //			    $('.note').hide();
        //			}
        //		);





        addnoteevents();

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

            imgOffset = $(image).offset();

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

            addnoteevents();





        });
    }

    function addnoteevents() {
        $('.note').hover(
			function() {

			    $(this).css("border", "2px solid rgb(255, 255, 255)");
			    $(this).children().show();


			},
			function() {
			    //$('.note').show();
			    $(this).css("border", "none");
			    $(this).children().hide();
			}
		);

        $('.note').click(
			function() {
			    $('.note').hide();
			    $('.note_inner').hide();

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



        $('.note_skelet').hover(
			function() {
			    id = (this.id).substr(5, (this.id).length);
			    iid = (this.id).substr(0, 6);

			    if (iid == "sklte_" || iid == "skltd_")
			        id = (this.id).substr(6, (this.id).length);


			    $('#' + id).css("border", "2px solid rgb(255, 255, 255)"); ;

			},
			function() {
			    $('#' + id).css("border", "none");

			}
		);

    }



    function appendnote(note_data) {

        var dt = new Date();
        var id = dt.valueOf();
		var window_width = $(window).width();
        var out = 0;

        note_left = parseInt(imgOffset.left) + parseInt(note_data.x1);
		note_left_left = note_left;

        if ((note_left + 500 + 130) > (window_width - 10)) {
            out = (note_left + 500 + 130) - window_width;
            note_left = note_left - out - 20;
        }

        note_top = parseInt(imgOffset.top) + parseInt(note_data.y1);
        note_p_top = note_top + parseInt(note_data.height) + 5;

        var zoom_top = parseInt(note_data.height) / 2;

        var div_top = Math.round(parseInt(note_p_top) / 1.5);
        var div_left = Math.round((note_data.width / 2) - 15);


        note_area_div = $("<div class='note' id='" + id + "'><div class='sspan' style='display:none;text-align:center;padding-left:" + div_left + "px; padding-top:" + zoom_top + "px;'><img class='zoom' src='/include/js/tags/zoom_icon.png' /></div></div>").css({ left: note_left_left + 'px', top: note_top + 'px', width: note_data.width + 'px', height: note_data.height + 'px' });

        //note_text_div = $('<div class="notep" id="' + id + '" >' + note_data.note + '</div>').css({ left: note_left + 'px', top: note_p_top + 'px' });
        // <div style="padding:0px;display:block;  width:320px">
        //            <div style="display:inline;border:1px solid red;width:140px"><img src="' + note_data.image + '" style="vertical-align:top"></div>
        //            <div style="border:1px solid gree;display:inline;width:180px;">' + note_data.note + '</div>
        //        </div>


        //note_text_div = $('<div class="my_corners_t" id="' + id + '"><div class="my_corners_l"><div class="my_corners_r"><div class="my_corners_b"><div class="my_corners_tl"><div class="my_corners_tr"><div class="my_corners_bl"><div class="my_corners_br"><div class="my_corners"><a style="position:absolute;margin-left:149px;padding-right:10px;" onclick=\'closeDiv(' + id + ')\' ><img src="/include/js/tags/close.png" /></a> <table width="100%"><tr><td valign="top" width="140"><img src="' + note_data.image + '" style="vertical-align:top"></td><td valign="top" align="left">' + note_data.note + '</td></tr></table></div></div></div></div></div></div></div></div></div>').css({ left: (parseInt(note_left) + 130) + 'px', top: div_top + 'px' });

        note_text_div = $('<table id="' + id + '" class="note_inner" style="background-color: rgb(255, 255, 255); display:none;width:500px; border-style:solid; border-width:10px; border-color:rgb(218, 210, 178);" cellpadding="0" cellspacing="0" border="0"><tr><td valign="left" align="top" rowspan="2"><img src="' + note_data.image + '" style="vertical-align:top;margin:2px;"></td><td align="left" valign="top" width="100%"><table style="margin-top:10px;margin-left:5px;margin-right:5px;" cellspacing="0" cellpadding="0" border="0"><tr><td align="left" valign="top">' + note_data.note + '</td></tr></table></td></tr><tr><td align="right" valign="bottom"><a style="color:#000;cursor:pointer;margin-bottom:2px;margin-right:3px;" onclick=\'closeDiv(' + id + ')\' >Close</a></td></tr></table>').css({  position: "absolute", left: (parseInt(note_left) + 130) + 'px', top: div_top + 'px' });


        note_skelet = $("<a class='note_skelet' id='sklt_" + id + "' style='padding-left:10px' >" + note_data.name + "</a>(<a href='edit.php?id=" + note_data.note_id + "&action=delete' class='note_skelet' id='skltd_" + id + "'>Remove tag</a> , <a href='edit.php?tag_id=" + note_data.note_id + "&action=edit' class='note_skelet' id='sklte_" + id + "'>Edit tag</a>");


        $('body').append(note_area_div);
        $('body').append(note_text_div);
        $('#tags_link').append(note_skelet);
        $('#tags_link').append(")");
    }



    // End the closure
})(jQuery);