$(document).ready(function() {

    $('#instagram_more').bind('click', function() { getInstagramList($(this).attr('data-count')); });
    $('.inst').bind('click', function() { showInstagramDetail($(this).attr('id')); });
});

function getInstagramList(count) {
    var fqdn = location.host;
    $.ajax({
        type: 'GET',
      //  url: 'http://taketomi.diocms.com/index.php?module=WebAPI&action=InstagramDataGet',
        url: 'http://'+fqdn+'/index.php?module=WebAPI&action=InstagramDataGet',
        data: {
            count: count
        },
        dataType: 'json',
        cache: false,
        success: function(data) {
            // Output data
            $.each(data.images, function(i, d) {
                         if (d.id) {
                $('#images').append('<li><img id="' + d.id + '" src="' + d.thumbnail + '" alt="" class="inst" style="cursor:pointer"></li>');
                }
                     });
            if (data.count >= 100) {
                $('#instagram_more').remove();
            } else {
                $('#instagram_more').attr('data-count', data.count);
            }
            $(".inst").bind("click", function(){
                showInstagramDetail($(this).attr('id'));
            });
        }
    });
}

function showInstagramDetail(id) {
    var fqdn = location.host;
    $.ajax({
        type: 'GET',
//        url: 'http://taketomi.diocms.com/index.php?module=WebAPI&action=InstagramDetailDataGet',
        url: 'http://'+location.host+'/index.php?module=WebAPI&action=InstagramDetailDataGet',
        data: {
            id: id
        },
        dataType: 'json',
        cache: false,
        success: function(d) {
		$('<div class="layer" />').on('click', function() {
            layer_hide();
        }).appendTo('body').fadeIn();
        // Output data
        var commens = [];
        if(d.comment_count){
            $.each(d.comments, function(key, val) {
              commens.push('<div class="insta_comment"><span class="comment_thumb"><img src="'+val.profile_picture+'" /></span><span class="comment_name">'+val.user+'</span><span class="comment_body">'+val.text+'</span></div>');
            });
          }
          $('<div id="instagram" />').append(
              $('<span />', {'html': 'x', 'class': 'btn cross'}),
              $('<a />', {
                  href: d.link,
                  target: '_blank',
                  html: $('<img />', {id: 'insta_photo', src: d.photo})
              }),
              $('<p />', {html: d.body}),
              $('<div />', {id: 'insta_comment', html: commens.join('')}),
              $('<iframe />', {
                  'id': 'insta_fblike',
                  'src': '//www.facebook.com/plugins/like.php?href='+encodeURI(d.link)+'&send=false&layout=button_count&width=530&show_faces=false&font&colorscheme=light&action=like&height=21',
                  'scrolling' : 'no',
                  'frameborder': 0,
                  'style': 'border:none; overflow:hidden; width:530px; height:21px;',
                  'allowTransparency': 'true'
              })
          ).on('click', function(e){
                e.stopPropagation();
          }).appendTo('div.layer').fadeIn();
          $('span.cross').on('click', function(){
              layer_hide();
          });
          $('#instagram').jScrollPane();
        }
	});
}

function layer_esc(e) {
    if (e.keyCode == 27) {
        layer_hide();
    }
}

function layer_hide() {
    $('div.layer').fadeOut(function(){
        $('div.layer').remove();
    });
}

$(document).keydown(layer_esc);