// relation.js -- 数珠繋ぎ

// 定数定義
var _RELATION = {
    url: '/relation/api.fcgi',
    left: 0,
    shopid: null,
    maxscroll: 0,
    move: 0,
    moving: null,
    nowLoading: false,
    dummy: null
};

// トップページ初期化
function relation_top_init() {
    $(function () {
          // データ読み込み
          $.getJSON(_RELATION.url, {limit: 9}, 
                    function (json) {
                        makeRelations(json);
                    });
      });
    function makeRelations(json) {
        var parent = $('#juzu');
        var src = $('#juzu-one');
        parent.empty();                           //中身を空にする
        if ($.isArray(json)) {
            for (var i = 0, l = Math.min(9, json.length); i < l; i++) {
                insertRelation(src, json[i]);
            }
        }
        function insertRelation(src, data) {
            var c = src.clone();
            //c.find('.juzu-link').attr('href', '/relation/?shopid='+data.shopid);
            c.removeAttr('id');
            c.find('.thumb').attr('src', '/relation/thumb/'+data.relationid+'.jpg');
            c.find('.icon').attr('src', 'images/icon_top0'+data.shopid+'.gif');
            c.css('display', '');
            parent.append(c);
        }
    }
}

// メインページ初期化
function relation_main_init() {
    var t = $('#thumbs');
    var shopid = window.location.search.match(/(?:\?|\&)shopid=([0-9]+)(?:$|\&)/);
    if (shopid) {
        shopid = shopid[1];
    } else {
        shopid = null;
    }
    
    _RELATION.left = 0;
    relation_load(t, 3 * 9);                      //初期読み込みは9列分(見えてるところ7列+2列)
    t.bind('scroll', function () {
               if (_RELATION.maxscroll < this.scrollLeft && this.scrollLeft + this.offsetWidth > this.scrollWidth - 89) {
                   relation_load(t, 3);
                   _RELATION.maxscroll = this.scrollLeft;
               }
           });
    function relation_load(elm, limit) {
        if (_RELATION.nowLoading) {
            return;
        }
        _RELATION.nowLoading = true;
        var options = {start: _RELATION.left, limit: limit};
        if (shopid) {
            options.shopid = shopid;
        }
        $.getJSON(_RELATION.url, options, 
                  function (json) {
                      _RELATION.left += json.length;
                      makeRelations(t, json);
                      _RELATION.nowLoading = false;
                  });
    }
    function makeRelations(p, json) {
        if ($.isArray(json)) {
            while (json.length > 0) {
                insertRelation(json.splice(0, 3));
            }
        }
        function insertRelation(data) {
            var div = $('<td class="thumb3"/>');
            for (var i = 0, l = data.length; i < l; i++) {
                var c = $('<img class="thumb" />');
                c.attr('src', '/relation/thumb/'+data[i].relationid+'.jpg');
                c.attr('dst', '/relation/photo/'+data[i].relationid+'.jpg');
                c.bind('click', function (ev) {
                    var cc = $('#closeup');
                    var img = $('#main-photo');
                    var ww = $('body').get(0).offsetWidth;
                    img.attr('src', $(this).attr('dst'));
                    cc.css('top', $(document).scrollTop());
                    if (ev.pageX < ww / 2) {
                        // カーソルが左
                        cc.css('right', 100);
                        cc.css('left',  '');
                    } else {
                        // カーソルが右
                        cc.css('left',  100);
                        cc.css('right',  '');
                    }
                    cc.css('display', '');
                    $(this).one('mouseout', function () { 
                        cc.css('display', 'none');
                    });
                });
                div.append(c);
            }
            p.find('#thumb-insert').before(div);
        }
    }
}

// 移動
function moveAction(dir) {
    _RELATION.move = dir;
    if (dir != 0) {
        // start
        moveActionStart();
    }
}
function moveActionStart() {
    if (_RELATION.moving) {
        return;
    }
    var div = $('#thumbs');
    var elm = div.get(0);
    // 現在の位置
    var now = elm.scrollLeft;
    if (_RELATION.move < 0 && now <= 0) {
        // 終端(左)
        elm.scrollLeft = 0;
        return;
    }
    var max = elm.scrollWidth - elm.offsetWidth; // 最後の15はパディング分
    if (_RELATION.move > 0 && now >= max) {
        // 終端(右)
        elm.scrollLeft = max;
        return;
    }
    var end = now + _RELATION.move / Math.abs(_RELATION.move) * 89;
    if (end < 0) {
        end = 0;
    }
    if (end > max) {
        end = max;
    }
    _RELATION.start = now;
    _RELATION.finish = end;
    _RELATION.time = 0;
    _RELATION.moving = _RELATION.move;
    interval();
    _RELATION.timer = setInterval(interval, 2);
    function interval() {
        var newleft = _RELATION.start + _RELATION.moving * ++_RELATION.time;
        var fin = false;
        if (_RELATION.moving > 0) {
            if (newleft >= _RELATION.finish) {
                fin = true;
            }
        } else {
            if (newleft <= _RELATION.finish) {
                fin = true;
            }
        }
        if (fin) {
            $('#thumbs').get(0).scrollLeft = _RELATION.finish;
            _RELATION.moving = 0;
            clearInterval(_RELATION.timer);
            if (_RELATION.move) {
                // 次の移動開始
                moveActionStart();
            }
        } else {
            $('#thumbs').get(0).scrollLeft = newleft;
        }
    }
}