//初期設定
var distance = 10;
var time = 250;
var hideDelay = 100;
var hideDelayTimer = null;
var beingShown = false;
var shown = false;

//==============================================================================================================
// ▼ :: hatebopen.js - ブックマークコメント領域の展開
//==============================================================================================================

$(function(){
  $('.trigger').click(function () {

    $('#hatena_bookmark').remove();//念のため、ブクマ表示領域を初期化（削除）
    $('#commentview').append('<div id="hatena_bookmark"><\/div>');//ブクマ表示領域の作成

    var url = $(this).attr("title");//title属性の取得
    var title = $(this).attr("rel");//rel属性の取得

    $('#hatena_bookmark').hatebShow("false",url,title);//hatebshow.jsに値を渡す

    if (hideDelayTimer) clearTimeout(hideDelayTimer);
    if (beingShown || shown) {
      // don't trigger the animation again
      return;
    } else {
      // reset position of info box

      beingShown = true;
        $('#commentview').css({
                  bottom: -10,
                  left: 0,
                  display: 'block'
        }).animate({
                  bottom: '+=' + distance + 'px',
                  opacity: 1
        }, time, 'swing', function() {
            beingShown = false;
            shown = true;
        });
    }

    return false;
  });
});


//==============================================================================================================
// ▼ :: hatebshow.js - ブックマークコメントの取得表示
//==============================================================================================================

(function($) {
  $.fn.extend({
    hatebShow: function(commentOnly,url,title) {
      //▼コメントがあるブックマークのみ表示するか（変数commentOnlyに[true/false]をセット）
      if (commentOnly == "false"){
        commentOnly = false; //falseならばすべて表示（コメントのないブクマも表示）
      }

      var div = this;
      div.append('<h3><img src="./img/common/hatena_count.png" alt="はてなブックマーク" /> <a href="' + url + '" target="_blank">' + title + '<span id="hateb_count"></span></a></h3>')
         .append('<img src="./img/common/hateb/close.gif" id="close" alt="閉じる" width="15" height="15" />');

      function callback(data) {
        if (!data){
        //▼1件もブックマークされていない場合
          div.append('<div id="comment-hateb" class="clearfix">');

          $("#hateb_count").append(" ( このサイトはまだブックマークされていません )");
          $("#comment-hateb").append('  <ul id="bookmarked_user">このサイトはまだブックマークされていません。<\/ul>');
          $("#comment-hateb").append('<div id="add-hateb"></div>');
          $("#add-hateb").append('    <p id="add-hateb-button"><a href="http://b.hatena.ne.jp/my/add.confirm?url=' + url + '"><img src="./img/common/hateb/recomend_hatena_comment.png" width="310" height="155" alt="ブックマークしてこの記事にコメントする" onmouseover="this.src=\'./img/common/hateb/recomend_hatena_comment_off.png\'" onmouseout="this.src=\'./img/common/hateb/recomend_hatena_comment.png\'" \/><\/a><\/p>')
                         .append('    <p id="add-hateb-title">はてなブックマークってなに？<\/p>')
                         .append('    <p id="add-hateb-description">はてなブックマークは、株式会社はてなが運営する<br \/>オンラインでブックマークを管理・共有できる無料サービスです。インターネット上でで自分のブックマークを公開することで旬な話題をみんなと共有できます。<\/p>')
                         .append('    <p id="add-hateb-link"><a href="http://b.hatena.ne.jp/guide" target="_blank">＞ はてなブックマークの詳細はこちら<\/a><\/p>');

        //▲1件もブックマークされていない場合
        }else{
        //▼ブックマークされてる場合
          div.append('<div id="comment-hateb" class="clearfix"></div>');

          $("#comment-hateb").append('  <ul id="bookmarked_user"><\/ul>');
          $("#comment-hateb").append('<div id="add-hateb"></div>');
          $("#add-hateb").append('    <p id="add-hateb-button"><a href="http://b.hatena.ne.jp/my/add.confirm?url=' + url + '"><img src="./img/common/hateb/recomend_hatena_comment.png" width="310" height="155" alt="ブックマークしてこの記事にコメントする" onmouseover="this.src=\'./img/common/hateb/recomend_hatena_comment_off.png\'" onmouseout="this.src=\'./img/common/hateb/recomend_hatena_comment.png\'" \/><\/a><\/p>')
                         .append('    <p id="add-hateb-title">はてなブックマークってなに？<\/p>')
                         .append('    <p id="add-hateb-description">はてなブックマークは、株式会社はてなが運営する<br \/>オンラインでブックマークを管理・共有できる無料サービスです。インターネット上でで自分のブックマークを公開することで旬な話題をみんなと共有できます。<\/p>')
                         .append('    <p id="add-hateb-link"><a href="http://b.hatena.ne.jp/guide" target="_blank">＞ はてなブックマークの詳細はこちら<\/a><\/p>');

          var comment_count = 0;
          $.each(data.bookmarks, function(){
            var u = this.user;
            if (!commentOnly || this.comment != '')
                $("#bookmarked_user").append('<li><img src="http://www.hatena.ne.jp/users/' + u.slice(0,2) + '/' + u + '/profile_s.gif" alt="' + u + '" title="' + u + '" width="16" height="16" /> <a href="http://b.hatena.ne.jp/' + u + '/">' + u + '</a> <span class="hb_timestamp">' + this.timestamp.slice(0,10) + '</span> <span class="hb_tag">' + this.tags.join(', ') + '</span><br /><span class="hb_comment">' + this.comment + '</span></li>');
            if(commentOnly || this.comment != ''){
              comment_count++;
            }
          });

          $("#hateb_count").append(" ( コメント：" + comment_count + " / ブックマーク数：" + data.count + " )");

        //▲ブックマークされてる場合

        }

          $("#close").click(function(){
            if (hideDelayTimer) clearTimeout(hideDelayTimer);
            hideDelayTimer = setTimeout(function () {
                hideDelayTimer = null;
                $('#commentview').animate({
                    bottom: '-=' + distance + 'px',
                    opacity: 0
                }, time, 'swing', function () {
                    shown = false;
                    $('#commentview').css('display', 'none');
                });
            }, hideDelay);
            $('#hatena_bookmark').remove();
            return false;
          });

        $("#bookmarked_user").fadeIn("slow");//ブクマ領域をフェードイン

      }

      //▼get JSON data with Hatena API
      //はてなAPI :: URLを指定するとJSON形式ではてなブックマークの情報が取得できます。
      $.getJSON("http://b.hatena.ne.jp/entry/json/?url=" + url + "&amp;callback=?", callback);
      return this;
    }

  });
})(jQuery);