jQuery(function ($) {
    var start = 0; //開始位置
    var count = 50; //表示数
    var postsCount = 0;
    var highres = false;
    var nocapt = false;
    var host = '';
    var user = '';
    var qStr = '';
    var baseUrl = window.location.protocol + '//' + window.location.host + '/';

    var autoClickEnabled = false; //自動クリック
    var BASE_REMAIN_HEIGHT = 150;

    //言語設定取得
    var getBrowserLang = function () {
            if (document.all) return navigator.browserLanguage //IE用
            else if (document.layers) return navigator.language //N4用
            else if (document.getElementById) return navigator.language.substr(0, 2) //N6,Moz用
        };

    //次へをクリック
    var autoPushNext = function () {
            var scrollHeight = document.body.scrollHeight;
            var bottom = Math.round(scrollHeight);
            var remainHeight = scrollHeight - bottom + BASE_REMAIN_HEIGHT;
            var innh = (window.innerHeight == undefined) ? $('html').innerHeight() : window.innerHeight;
            var remain = scrollHeight - innh - $(window).scrollTop();
            if (autoClickEnabled && $('#next').length && (remain < remainHeight)) {
                $('#next').click();
            }
        };

    //QueryString生成
    var mkQueryString = function () {
            var optlist = new Array()
            if ($('input#set-highres').attr('checked')) optlist.push('h');
            if ($('input#set-collage').attr('checked')) optlist.push('c');
            if ($('input#set-shuffle').attr('checked')) optlist.push('s');
            if ($('input#set-nocapt').attr('checked')) optlist.push('nc');
            if (qStr) optlist.push('q=' + encodeURIComponent(qStr));
            return optlist.join('&');
        };

    //総photo数表示
    var viewPostsCount = function (posts) {
            $('#postscount').text([posts, (posts > 1 ? ' photos' : ' photo')].join(''));
        };


    //ショートカットキー設定
    var setShortKeys = function () {
            $(document).bind(($.browser.opera ? 'keypress' : 'keydown'), function (objEvent) {
                if ((document.activeElement.name != 'q') && $('#next').length) {
                    var keycode = objEvent ? objEvent.keyCode : event.keyCode;
                    var key = String.fromCharCode(keycode).toLowerCase();
                    switch (key) {
                    case 'n':
                        //次へ
                        $('#next').click();
                        break;
                    default:
                        break;
                    }
                }
            });
        };

    //tumblrデータ取得／表示
    var getTumb = function () {
            $('.loader').show();
            //取得（tumblr API）
            var url = ['http://', tumblr_api_read['tumblelog']['name'], '.tumblr.com/api/read/json?type=photo&filter=text', '&start=', start, '&num=', count, (qStr ? '&search=' + qStr : ''), '&callback=?'].join('');
            $.getJSON(url, function (tumblr_api_read) {
                $('.loader').hide();
                var post = tumblr_api_read['posts-total'];
                //次へ／終了挿入
                start += count;
                if (tumblr_api_read['posts'].length == count) {
                    //「次へ」アイテム
                    var next = $(['<div id="next" class="wrap">', ((!qStr) ? start + '<br />/' + post : ''), '<br />next', '</div>'].join('')).click(function () {
                        $(this).remove();
                        getTumb();
                    }).hover(function () {
                        $(this).addClass('hoverover');
                    }, function () {
                        $(this).removeClass('hoverover');
                    });
                } else {
                    //終了アイテム
                    var next = $('<div id="end">');
                }
                next.insertBefore('.loader')

                //サムネイル追加
                $.each(tumblr_api_read['posts'], function () {
                    //サムネイル構築
                    var caption = this['photo-caption'];
                    var pUrl = highres ? this['photo-url-1280'] : this['photo-url-500'];
                    if (!pUrl) pUrl = this['photo-url-500'];

                    var itemHtml = ['<a class="link highslide" href="', pUrl, '" title="', caption, '" target="_blank" onclick="return hs.expand(this)">', '<img class="thumb" src = "', this['photo-url-75'], '" width="75" height="75" />', '</a>'].join('');
                    itemHtml = [itemHtml, '<div class="highslide-caption">'].join('');
                    if (!nocapt) {
                        itemHtml = [itemHtml, caption, '<br />'].join('');
                    }
                    itemHtml = [itemHtml, '<div id="captLink">', '<a id="permalink" href="', this['url'], '" target="_blank" title="permalink"><img src="img/perma.png" alt="permalink"></a>&nbsp;', '<a id="rebloglink" href="http://www.tumblr.com/reblog/', this['id'], '/' + this['reblog-key'] + '" target="_blank" title="reblog this!"><img src="img/reblog.png" alt="reblog this!"></a>', '</div>'].join('');
                    itemHtml = [itemHtml, '</div>'].join('');
                    var item = $('<li class="item wrap">').append(itemHtml).hover(function () {
                        $(this).addClass('hoverover');
                    }, function () {
                        $(this).removeClass('hoverover');
                    });

                    //最後の要素の直前に追加
                    item.insertBefore('#next ,#end');
                });
                autoPushNext();
            });
            hs.updateAnchors();
        };

    //onLoad
    if (typeof (tumblr_api_read) == 'undefined') {
        //user無効時
        $('#images').load('default.php');
    } else {

        //scrool event
        $(window).bind('scroll', autoPushNext);

        //Query form
        $('form#query > :submit').click(function () {
            if ($('form#query > :text').val()) {
                qStr = $('form#query > :text').val();
                var u = (mkQueryString() == '') ? baseUrl + tumblr_api_read['tumblelog']['name'] : baseUrl + tumblr_api_read['tumblelog']['name'] + '?' + mkQueryString();
                console.debug(u);
                window.location = u;
            }
            return false;
        });

        //queryString処理
        var ttmp = new Array();
        if ($.query.get('h')) {
            highres = true;
            ttmp.push('highres');
        }
        if (!$.query.get('c') && $.query.get('nc')) {
            nocapt = true;
            ttmp.push('no caption');
        }
        if ($.query.get('q')) {
            qStr = $.query.get('q');
            ttmp.push('serach');
        }

        var addTitle = ttmp.join(' | ');

        //setting-box関連
        //初期設定
        $('input#set-highres').attr('checked', highres);
        $('input#set-nocapt').attr('checked', nocapt);
        $('input#set-autonext').attr('checked', false);

        $('p#set-home > a').attr('href', baseUrl).text(baseUrl);

        var u = (mkQueryString() == '') ? baseUrl + tumblr_api_read['tumblelog']['name'] : baseUrl + tumblr_api_read['tumblelog']['name'] + '?' + mkQueryString();
        $('p#set-url > a').attr('href', u).text(u);

        //event設定
        $('#trigger-box').mouseover(function () {
            //debug
            $('#setting-box').show();
        });
        $('#setting-box, #setting-box *').mouseover(function () {
            $('#setting-box').show();
        });
        $('#setting-box').mouseout(function () {
            $(this).hide();
        });
        $('span#close').click(function () {
            $('#setting-box').hide();
        });

        //auto click
        $('input#set-autonext').click(function () {
            autoClickEnabled = $(this).attr('checked');
            $('#set-autonext-label').text(autoClickEnabled ? 'Auto load enabled' : 'Auto load disabled');
            if (autoClickEnabled == true) autoPushNext();
        });

        //optクリック
        $('input#set-highres, input#set-collage, input#set-shuffle, input#set-nocapt').click(function () {
            var u = (mkQueryString() == '') ? baseUrl + user : baseUrl + user + '?' + mkQueryString();
            $('p#set-url > a').attr('href', u).text(u);
        });

        //
        $('#postscount').show();

        //Highslide JS設定
        hs.numberOfImagesToPreload = 20;
        hs.transitions = ['expand', 'crossfade'];
        hs.outlineType = 'rounded-white';
        hs.fadeInOut = true;
        hs.align = 'center';
        hs.outlineType = 'rounded-white';
        hs.addSlideshow({
            interval: 3000,
            repeat: false,
            useControls: true,
            fixedControls: true,
            overlayOptions: {
                opacity: .75,
                position: 'top center',
                hideOnMouseOut: true
            }
        });

        $('#trigger-box').css('background-color', '#aae2ff');

        setShortKeys();

        var tumburl = tumblr_api_read['tumblelog']['cname'] ? tumblr_api_read['tumblelog']['cname'] : [tumblr_api_read['tumblelog']['name'], '.tumblr.com'].join('');
        host = tumburl;
        user = tumblr_api_read['tumblelog']['name'];
        var vName = (getBrowserLang() == 'ja') ? 'たんぶらびゅーあー' : 'Tumblr Viewer';

        $(document).attr('title', [tumblr_api_read['tumblelog']['title'], ' - ', vName, ' ', addTitle].join(''));
        $('#header h1').html(tumblr_api_read['tumblelog']['title']);
        $('#header h2').html(['<a href="http://', tumburl, '/" target="_blank">', tumburl, '</a>'].join(''));
        $('#images').append('<div class="loader"><img src = "img/ajax-loader.gif" /></div>');
        viewPostsCount(tumblr_api_read['posts-total']);
        $('form#query').css('display', 'inline');
        getTumb();
    }
});