var itemPerPage = 10;
var currentPage = 0;
var favesArray = new Array();

$(document).ready(function() {

    var url = String(document.location);
    var query;
    if (url.indexOf("#") > 0) {
        query = decodeURI(url.substring(url.indexOf("#") + 1));
    }

    $(".area .article_title .inner").each(function() {

        var clickedNode = $(this);

        // エリアラベルがクリックされたら
        $(this).click(function() {
            var parent = $(this).parent().parent();
            var areaId = parent.attr("id");
            var targetNode = $("#" + areaId + " .faves");
            var targetSwitchNode = $("#" + areaId + " .switch span");
            var areaTitle = $("#" + areaId + " h2.label").text();
            if (targetNode.css("display") == "none") {
                // このエリアが閉じている場合
                closeOthers(areaId);
                openArea(areaId);
                $("#menu li.title").fadeIn("farst");
                $("#page_title").html(areaTitle).css("display","block");
            } else {
                // このエリアがオープン済みの場合
                targetNode.slideToggle("fast", function(){
                    targetSwitchNode.removeClass("open");
                });
                $("#menu li.title").fadeOut("farst");
                $("#area_title").html(areaTitle).css("display","none");
            }
            
        });

        // 解放済みエリアを閉じる
        function closeOthers(areaId) {
            $(".area").each(function() {
                var currentId = $(this).attr("id");
                if (currentId != areaId) {
                    var targetNode = $("#" + currentId + " .faves");
                    var targetSwitchNode = $("#" + currentId + " .switch span");
                    if (targetNode.css("display") != "none") {
                        targetNode.slideToggle("fast", function(){
      		                targetSwitchNode.removeClass("open");
 		                });
                    }
                }
            });
        }

        function openArea(areaId) {
            // 指定されたエリアを開く
            currentPage = 0;
            if (favesArray[areaId] == null) {
                // json未取得の場合
                $.get("./" + areaId + ".json", renderArea);
            } else {
                // json取得済みの場合
                renderArea(favesArray[areaId]);
            }
        }

        // 1エリア分を表示
        function renderArea(data) {
            eval("var area = " + data);
            favesArray[area.name] = data;
            var faves = area.faves;

            // ページネーション準備
            var from = currentPage * itemPerPage;
            var to = from + itemPerPage;
            if (to > faves.length) {
                to = faves.length;
            }

            var html = "";
            for (var i=from; i<to; i++) {
                html += makeAreaHTML(faves[i]);
            }

            // ページネーションナビ
            var totalPages = Math.ceil(faves.length / itemPerPage);
            var prevCount = itemPerPage;
            var nextCount = itemPerPage;
            if (currentPage == totalPages - 2) {
                nextCount = faves.length - (currentPage + 1) * itemPerPage;
            }
            html += '<div class="pageNavi">';
            if (currentPage > 0) {
                html += '<span class="prevPageNavi">';
                html += '<a href="javascript:void(0);"><span class="decoration"></span><span class="prevCount">前の' + prevCount + '件</span></a>';
                html += '</span>';
            }
            html += "&nbsp;";
            html += (currentPage + 1) + "/" + totalPages;
            html += "&nbsp;";
            if (currentPage < totalPages - 1) {
                html += '<span class="nextPageNavi">';
                html += '<a href="javascript:void(0);"><span class="decoration"></span><span class="nextCount">次の' + nextCount + '件</span></a>';
                html += '</span>';
            }
            html += '</div>';

            var targetNode = $("#" + area.name + " .faves");
            targetNode.html(html);

            // ページネーション機能をセット
            setPaginationTrigger();

            var containerNode = $("#" + area.name + " .faves");
            var containerSwitchNode = $("#" + area.name + " .switch span");
            if (containerNode.css("display") == "none") {
                // まだ開いていない場合のみオープン
                containerNode.slideToggle("fast", function(){
     		        containerSwitchNode.addClass("open");
                });
            }
        }

        function makeAreaHTML(fave) {
            var result = '<div class="fave">';
            result += '<div class="photo"><a class="name" href="' + fave.uri + '"><img src="' + fave.image + '" /></a></div>';
            result += '<h3><a class="name" href="' + fave.uri + '">' + fave.name + '</a></h3>';
            result += '<p class="description">' + fave.description + '</p>';
            result += '<div class="tags">';
            for (var i=0; i<fave.tags.length; i++) {
                result += '<span class="tag"><a href="' + fave.tag_links[i] + '">' + fave.tags[i] + '</a></span>';
                if (i==0){
                result += '/ ';
                }
            }
            result += '</div>';
            result += '<p class="spot_detail"><a href="' + fave.uri + '"></a></p>';
            result += '</div>';
            return result;
        }

        function makeEmptyAreaHTML() {
            var result = '<div class="faveEmpty">';
            result += '<div class="photo"></div>';
            result += '<h3></h3>';
            result += '<p class="description"></p>';
            result += '<p class="spot_detail"></p>';
            result += '</div>';
            return result;
        }

        function setPaginationTrigger() {
            $(clickedNode).parent().parent().find(".nextPageNavi").click(function() {
                var areaId = clickedNode.parent().parent().attr("id");
                currentPage ++;
                renderArea(favesArray[areaId]);
            });
            $(clickedNode).parent().parent().find(".prevPageNavi").click(function() {
                var areaId = clickedNode.parent().parent().attr("id");
                if (currentPage > 0) {
                    currentPage --;
                    renderArea(favesArray[areaId]);
                }
            });
        }


        // 初期化
        if ($(this).parent().parent().attr("id") == query) {
            $(this).click();
        }

    });


    /*
    $(".area .pageNavi").each(function() {
        $(this).click(function() {
            
            var area = $(this).parent().parent();
            var areaId = area.attr("id");
            currentPage ++;
            openArea(areaId);
        });
    });
    */

});