{@ $wi = $widget_info; }
<load target="css/normal.css" />
<load target="js/respond.min.js" />
<load target="js/modernizr.custom.23610.js" />
<load target="js/html5sticky.js" />
<load target="js/prettyDate.js" />

   <!-- JavaScript -->
   <!--[if IE]><![endif]-->
   <!--[if lt IE 9]>
   <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->

<style>
.mhsticky_title h2 { background:{$wi->top_background_color}; color:{$wi->title_font_color}; border-bottom:{$wi->board_line} {$wi->board_line_width}px {$wi->board_line_color}; width:{$wi->board_width}% }

.note_common { color:{$colorset} }
.note_common h2{ font-size:{$wi->mtitle_font_size}; background-color:{$wi->back_color}; color:{$wi->mtitle_color}}
.note_common p{ font-size:{$wi->memo_font_size}; }

@media all and (max-width: 479px) {
#sticky_main { left:50%; margin-left:40px; z-index:99 }
}
</style>

	<div class="mhsticky_title" cond="$wi->title">
		<h2>{$wi->title}</h2>
	</div>

	<div id="sticky_main" class="col">
		<a href="#" id="addnote"><img src="img/add.png" class="pr_tooltip" pr_color="{$widget_info->tooltip_color}" pr_position="{$widget_info->tooltip_location}" alt="Memo 추가" title="Memo 추가"></a>
		<a href="#" id="removenotes"><img src="img/remove.png" class="pr_tooltip" pr_color="{$widget_info->tooltip_color}" pr_position="{$widget_info->tooltip_location}" alt="모든 Memo 삭제" title="모든 Memo 삭제"></a>
		<div class="clear"></div>
	</div>

	<div class="clear"></div>

<script>
var stickywidth = {$wi->sticky_width}; // width of sticky note (can't be less than 150)
var stickyheight = {$wi->sticky_height}; // height of sticky note (can't be less than 200)

html5sticky.addNote = function(){

    // count total present notes
    var tnotes = $('.note_common').length;

    if (tnotes === max_notes){
       alert('You can not add any more notes, please delete some to add more.');
       return false;
    }

    // unique localstorage identifier for this sticky note
    var nindex = ++note_index + 'stickynote';

    var dated = html5sticky.getDateTime();
    var dateStr = new Date();
   
    // get random color
    var bgcolor = html5sticky.getColor();
    var rotationClass = html5sticky.getRotation();

    var stickynote = $('<div class="note_common ' + bgcolor + ' ' + rotationClass + '" />').appendTo($('#sticky_main'));
    // add tape to stickynote
    html5sticky.addPin(stickynote);

    $(stickynote).append($('<h2>' + dated + '</h2>'));
    $(stickynote).append($('<p class="{$colorset}">Memo작성시 클릭하세요...</p>'));
    // append identifier
    $(stickynote).append($('<span id="idf_' + nindex + '" />'));

    // set width and height of the sticky note
    $('.note_common').css({width: stickywidth + 'px', height:stickyheight + 'px'});

    $('.note_common p').css({height:(stickyheight - 60) + 'px', width:(stickywidth + 9) + 'px'});

    if (! $("#removenotes").is(':visible')){
       $('#removenotes').slideDown('slow');
    }

    // scroll to newly added sticky note
    $('html, body').animate({
      scrollTop:$(stickynote).offset().top
    });
    
    // store note info local storage
    if (Modernizr.localstorage){
       localStorage.setItem(nindex, nindex);
       localStorage.setItem(nindex + '|pos', parseInt($(stickynote).offset().left, 10) + '|' + parseInt($(stickynote).offset().top, 10));
       localStorage.setItem(nindex + '|text', $(stickynote).find('h2').text() + '|' + $(stickynote).find('p').text());
       localStorage.setItem(nindex + '|settings', bgcolor + '|' + rotationClass);
       localStorage.setItem(nindex + '|dated', dated + '|' + html5sticky.getISODateTime(dateStr));
    }
    else {
       html5sticky.nohtml5();
    }
};

html5sticky.editNote = function($clone, el){
   var ptext = $clone.find('p').html();
   ptext = ptext.replace(/(<br \/>|<br>)/g, '\n');
   $clone.find('p').replaceWith('<textarea class="pedit"/>');

   $clone.find('.pedit')
      .val(ptext)
      .css('margin-top', '15px')
	  .addClass('inset')
      .width('{$wi->pedit_width-10}px')
      .height('{$wi->pedit_height-120}px');

   // make content editable
   var htext = $clone.find('h2').text();
   $clone.find('h2').replaceWith('<input type="text" class="hedit" />');

   $('.hedit').addClass('inset').val(html5sticky.stripTags(htext, allowed_tags)).width(200);

   // put in Close button
   $('<a href="#" class="close_stickynote"><img src="img/deletebig.png" alt="" title="편집창 닫기"></a>')
      .css({
         position:'absolute',
         top:7,
         right:5
      })
      .appendTo($clone);

   // put in Save button
   $('<a href="#" class="save_stickynote"><img src="img/savebig.png" alt="" title="Memo 저장"></a>')
      .css({
         position:'absolute',
         top:7,
         right:60
      })
      .appendTo($clone);

   // put in Tip
   $('<span class="tip">Tip: Allowed HTML tags: <code>')
      .css({
         position:'absolute',
         bottom:10,
         left:15
      })
      .appendTo($clone);

   var tags = allowed_tags;
   tags = tags.replace('<br />', '');
   // remove ending tags
   tags = tags.match(/<([A-Z][A-Z0-9]*)\b[^>]*>(.*?)/ig);
   $('.tip').text($('.tip').text() + tags.join(' '));

};

html5sticky.enlargeNote = function(el){
      $this = $(el);

      // get initial position
      var posLeft = parseInt($(el).offset().left, 10);
      var posTop = parseInt($(el).offset().top, 10);

      // create overlay
      $('<div id="overlay" />').css({
         position:'fixed',
         background:'transparent',
         background:'rgba(0,0,0,0.5)',
         top:'0',
         left:'0',
         width:'100%',
         height:'100%',
         zIndex:'100'
      }).appendTo($('body'));

      $clone = $(el).clone().removeClass('note_common').addClass('bignote').appendTo($('#overlay'));
      
      // remove the pin
      $clone.find($('img[src*="pin.png"]').closest('div')).hide();
      // change delete button title
      $clone.find($('img[src*="delete.png"]').closest('div')).hide();

      $($clone).css({
         position:'absolute',
         zIndex: 500,
         cursor:'default',
         paddingTop:'5px',
         top:posTop,
         left:posLeft,
         width:'{$wi->pedit_width}px',
         height:'{$wi->pedit_height}px',
         top:'50%',
         left:'50%',
         display:'none',
         marginLeft:'-{$wi->pedit_width/2}px',
         marginTop:'-{$wi->pedit_height/2}px'
      });

      $($clone)[html5sticky.getAnimation()](400);

      // add date and time info
      var dateStr = '', dateAgo = '';

      if (Modernizr.localstorage){
         var identifier = html5sticky.getIdentifier($(el));
         var dateTime = localStorage.getItem(identifier + '|dated');
         var timeImg = '<img class="left" align="absmiddle" src="img/time.png">';

         dateStr = dateTime.split('|')[0];
         dateAgo = prettyDate(dateTime.split('|')[1]);

         dateStr = (dateStr.length > 0) ? 'Created on: ' + dateStr : '';
         dateAgo = (dateAgo.length > 0) ? ' (' + dateAgo + ')' : '';
         timeImg = (dateStr.length > 0) ? timeImg : '';
         
      }
      else {
         html5sticky.nohtml5();
      }

      $('<div class="timeago left" />').prependTo($clone);
      $('.timeago').css({fontSize: '12px', fontFamily:'tahoma'}).html(timeImg + '&nbsp;&nbsp;' + dateStr + dateAgo);
      $('.timeago').after('<div class="clear" />');

      // hide the utility buttons
      $($clone).find('.icons-footer').hide();

      // make content editable
      html5sticky.editNote($clone, el);
};
</script>