/* Generate the thumbnail <li>(for first time) and display it
 * then, swith the "View Thumbnails" to "Hide Thumbnails"
 *
 *
 * @thumb_url_list: an array of thumbnail url list
 * @base_url: the base url(url except page number) without trailing /
 * @cur_page_no: current page no
 */
function show_thumb_list(thumb_url_list, base_url, cur_page_no){
    /* If thumbnail <li> already here, only display them */
    if( $("#thumbs_container ol").length != 0 ){
        $("#thumbs_container").show();
        
         $("#img_view_thumb").hide();
         $("#img_hide_thumb").show();
        return;
    };
    
    /* If not, generate the thumb <li> */
    $("#thumbs_container").html("");
    
    //generate list
    var length = thumb_url_list.length;
    var html = "<ol>";
    for(var i = 0; i < length; i++){
        html += ('<li><a href="' + base_url + '/' + (i+1) + '/"><img src=\'' + thumb_url_list[i] + '\' /></a></li>');
    }
    html += "</ol>";
    $("#thumbs_container").append(html);
    
    //Bind Event(to set opacity)
    $('#thumbs_container img').each(function(idx){
        if(idx != cur_page_no){
          $(this).mouseover(function(){
            $(this).css('opacity', 0.5);
          });
          
          $(this).mouseleave(function(){
            $(this).css('opacity', 1);
          });
        }else{
             $(this).css('opacity', 0.5);
        }
    });
    
    //Show
    $("#img_view_thumb").hide();
    $("#img_hide_thumb").show();
}

/* Shift to Fullsize mode
 */
function fullsize(){
    $("div.center aside").hide();
    $("#container-page-content").width(980);
    
    //shift main_photo
    $("#medium_size_img").hide();
    $("#large_size_img").show();
    
    $("#fullsize").hide();
    $("#mediumsize").show();
    
    //Switch CSS
    $("#post-word-part").removeClass("post-word-part-mediumsize");
    $("#post-word-part").addClass("post-word-part-fullsize");
    $("#container-story-actions").addClass("story-actions-fullsize");
}

/* Shift to Medium Size Mode
 */
function mediumsize(){
    $("div.center aside").show();
    $("#container-page-content").width(665);
    
    //shift main_photo
    $("#large_size_img").hide();
    $("#medium_size_img").show();
    
    $("#mediumsize").hide();
    $("#fullsize").show();
    
    //Switch CSS
    $("#post-word-part").removeClass("post-word-part-fullsize");
    $("#post-word-part").addClass("post-word-part-mediumsize");
    $("#container-story-actions").removeClass("story-actions-fullsize");
}

/* Hide thumbnail
 */
function hide_thumb(){
     $("#img_view_thumb").show();
     $("#img_hide_thumb").hide();
     
     $("#thumbs_container").hide();
}