/*
*  fiito.defaultText.js
*
*  時間軸
*
*  Date : 2009-9-18 11:23
*  Author : thchang
*
*/
;if (window.jQuery) (function($) {
    var x = 0;
    var ismousedown = false;
    var current_type = '';
    var json_url = '';
    var scroll_back, scroll_next;
    $.fn.timeline = function() {
        var bindtype = '';
        if (arguments.length == 1 && typeof arguments[0] == 'object') {
            var param = arguments[0];
            json_url = param.url;
            // menu button
            if (param.menuobjid != undefined)
                bindmenu($('#' + param.menuobjid));
            // prev page button
            if (param.prevobjid != undefined) {
                scroll_back = $('#' + param.prevobjid).bind('click', move_prevpage).hide();
            }
            // next page button
            if (param.nextobjid != undefined) {
                scroll_next = $('#' + param.nextobjid).bind('click', move_nextpage).hide();
            }
            hidescrollobj();
            if (param.defaultType != undefined) {
                bindtype = param.defaultType;
                setmenu($('#' + param.menuobjid), bindtype);
            }
        }
        else {
            json_url = arguments[0];
            // menu button
            if (arguments.length > 1)
                bindmenu($('#' + arguments[1]));
            // prev page button
            if (arguments.length > 2) {
                scroll_back = $('#' + arguments[2]).bind('click', move_prevpage).hide();
            }
            // next page button
            if (arguments.length > 3) {
                scroll_next = $('#' + arguments[3]).bind('click', move_nextpage).hide();
            }
        }
        var loading = $('<div class="loading">載入中...</div>');
        var debug = $('<div id="tm_debugplace"><div id="tm_debug"></div></div>');
        debug.width(300).height(200).css('border', '3px solid #ccc');
        var tp = $('<div id="tm_place"></div>');

        var tm = $('<div id="tm_timeline"></div>');
        var clear = $('div class="clear"></div>');
        loading.hide().appendTo(tp);
        tp.append(tm);
        this.append(debug);
        this.append(tp).append(clear);
        $('#tm_timeline').bind('mousedown', mousedown)
                        .bind('mouseup', mouseup)
                        .bind('mousemove', mousemove)
                        .bind('mousewheel', mousewheel)
                        .css('left', tp.position().left);
        //$(document).ready(function() {
        bindtimeline($('#tm_timeline'), json_url, bindtype);
        //});

        $(document).bind('mousemove', dmousemove);
        $('#tm_debug').click(function() { $(this).html(''); });
    };
    function bindtimeline(tm, url, type) {
        var tm_place = $('#tm_place');
        current_type = type;
        tm.find('div').remove();
        var loading = $('#tm_place > .loading').show();
        tm_place.append(loading);
        var topline = $('<div id="tm_top"></div>');
        var time = $('<div id="tm_time"></div>').hide();
        tm_place.append(time);
        //$.getJSON(url + '?method=getjson&type=' + type, {method:'getjson', type: type, jsoncall: 'true'}
        $.getJSON(url, { method: 'getjson', type: type, jsoncall: 'true' },
            function(data) {
                var max_w = 0, cw = 0;
                var diff = 18;
                var margin = 0;
                var padding = 0;
                var thisdayblock;
                if (data.ArrayOfInkDataJSON && data.ArrayOfInkDataJSON.InkDataJSON) {
                    var needblock = (data.ArrayOfInkDataJSON.block == 'true');
                    if (needblock)
                        tm.append(topline);
                    $.each(data.ArrayOfInkDataJSON.InkDataJSON, function(i, item) {
                        var workhtml = '<div class="workBox" key="' + item.Ink_Key + '">' +
                                         '<div class="memberBox">' +
                                            '<div class="memberPhotoBox"><img src="' + item.Author_Avatars + '" style="width:20px;height:20px;" /></div>' +
                                            '<div class="memberNameBox"><a href="' + item.Author_Url + '" class="link_white">' + item.Author_Name + '</a></div>' +
                                            '<div class="clear"></div>' +
                                         '</div>' +
                                         '<div class="imgBox"><a href="' + item.Ink_Url + '"><img src="' + item.Ink_Thumb + '" style="width:80px;height:80px;" title="' + item.Ink_Title + '" /></a></div>' +
                                         '<div class="ink_icon"></div>' +
                                         '<div class="viewTimesBox">瀏覽: <strong>' + item.Ink_Views + '</strong> 次</div>' +
                                         '<div class="voteTimesBox">推 <strong>' + item.Ink_Pushs + '</strong> 次</div>' +
                                         '<div class="voteTimesBox">回應 <strong>' + item.Ink_Reply + '</strong></div>' +
                                         '<div class="iconBox"></div>' +
                                       '</div>';
                        var work = $(workhtml);
                        if (item.AuthType != '10')
                            work.find('.ink_icon').append('<div class="icon_lock"></div>');
                        if (item.IsPlay == "N")
                            work.find('.ink_icon').append('<div class="icon_noplay"></div>');
                        work.attr('time', item.CreateDate);
                        work.bind('mouseover', workover).bind('mouseout', workout);
                        tm.append(work);
                        //cw = work.width();
                        cw = work.outerWidth();
                        if (margin == 0)
                            margin = parseInt(work.css('margin-left')) * 2;
                        if (padding == 0)
                            padding = parseInt(work.css('padding-left')) * 2;
                        if (cw > max_w)
                            max_w = cw;
                        if (item.Dayblock != thisdayblock && needblock) {
                            var daytext = $('<span class="daytext">' + item.Dayblock + '</span>')
                                        .hide()
                                        .attr('key', item.Ink_Key);
                            var dayblock = $('<div class="dayblock"></div>')
                                        .hide()
                                        .attr('key', item.Ink_Key);
                            topline.append(dayblock).append(daytext);
                            //tm.append(dayblock);
                            thisdayblock = item.Dayblock;
                        }
                    });
                    $('#tm_timeline').bind('dblclick', function() { return false; });
                    tm.find('.workBox').css('width', max_w);
                    max_w = max_w + margin + padding;
                    tm.width((tm.find('.workBox').length * max_w) + diff);
                    if (needblock) {
                        tm.css('padding-top', '')
                        .find('.dayblock').each(function() {
                            var el = $(this);
                            var key = '.workBox[key="' + el.attr('key') + '"]';
                            var l = $(key).position().left;
                            tm.find('.daytext[key="' + el.attr('key') + '"]').css('left', l + el.outerWidth()).show();
                            el.css('left', l).show();
                        });
                    }
                    else {
                        tm.css('padding-top', '30px');
                    }
                }
                else {
                    // empty
                    tm.width(tm.parent().width());
                }

                moveto_timeline(tm, 0);

                if (tm.width() < tm.parent().width())
                    tm.width(tm.parent().width());
                loading.hide();
            }
        );
    }
    var timerID;
    function workover() {
        var el = $(this);
        if (timerID != undefined)
            clearTimeout(timerID);
        if (ismousedown)
            return false;
        var time = $('#tm_time');
        var timetext = time.find('div');
        if (time.children().length == 0) {
            timetext = $('<div></div>').css('z-index', '202');
            time.append(timetext);
        }
        timetext.html(el.attr('time'));

        var pl = parseInt(el.css('padding-left'));
        var ml = parseInt(el.css('margin-left'));
        var l = (el.parent().position().left + el.position().left) + pl + ml;
        time.css('left', l).show();
    }
    function workout() {
        var time = $('#tm_time');
        //time.hide();
        if (timerID != undefined)
            clearTimeout(timerID);
        timerID = setTimeout(function() { time.find('div').remove().end().hide(); }, 300);
    }
    function bindmenu(menu) {
        menu.find('a[type]').each(function() {
            $(this).bind('click', function() {
                hidescrollobj();
                setmenu(menu, $(this));
                var type = $(this).attr('type');
                if (current_type != type)
                    bindtimeline($('#tm_timeline'), json_url, type);
            });
        });
    }
    function setmenu(menu, menuitem) {
        var item;
        var seted = false;
        menu.find('a[type]').each(function() {
            var parentCss = $(this).parent().attr('class').replace("_on", "").replace("_off", "");

            $(this).attr('class', 'link_gray').parent().attr('class', parentCss + '_off');
            if (typeof menuitem == 'string' && $(this).attr('type') == menuitem) {
                seted = true;
                item = $(this);
            }
        });
        if (item == undefined && typeof menuitem == 'object')
            item = menuitem;
        if (item != undefined) {
            var parentCss = item.parent().attr('class').replace("_on", "").replace("_off", "");
            item.attr('class', 'link_white').parent().attr('class', parentCss + '_on');
        }
    }

    function mousedown(e) {
        x = e.clientX;
        ismousedown = true;
        return false;
    }
    function mouseup(e) {
        ismousedown = false;
    }
    function dmousemove(e) {
        ismousedown = false;
    }
    var lastmove = new Date();
    function mousemove(e) {
        if (ismousedown) {
            var thismove = new Date();
            //debug(thismove - lastmove);
            if (thismove - lastmove > 100) {
                move_timeline(e.clientX - x);
                x = e.clientX;
                lastmove = thismove;
            }
        }
        e.stopPropagation();
        return false;
    }

    function move_prevpage() {
        var offset = $('#tm_place').width();
        var tm = $('#tm_timeline');
        var left = tm.position().left;
        var newl = left + offset;
        var maxl = (0 - (tm.width() - $('#tm_place').width()));
        var setl = 0;
        if (newl > 0 && newl > maxl)
        //tm.css('left', 0);
            setl = 0;
        else if (newl <= 0 && newl <= maxl)
        //tm.css('left', maxl);
            setl = maxl;
        else if (newl <= 0 && newl > maxl)
        //tm.css('left', newl);
            setl = newl;
        tm.animate({ left: setl }, 500, 'linear', check_scrollbutton_status);
    }

    function move_nextpage() {
        var offset = 0 - $('#tm_place').width();
        var tm = $('#tm_timeline');
        var left = tm.position().left;
        var newl = left + offset;
        var maxl = (0 - (tm.width() - $('#tm_place').width()));
        var setl = 0;
        if (newl > 0 && newl > maxl)
        //tm.css('left', 0);
            setl = 0;
        else if (newl <= 0 && newl <= maxl)
        //tm.css('left', maxl);
            setl = maxl;
        else if (newl <= 0 && newl > maxl)
        //tm.css('left', newl);
            setl = newl;
        tm.animate({ left: setl }, 500, 'linear', check_scrollbutton_status);
    }

    function move_timeline(offset) {
        $('#tm_time').hide();
        if (timerID != undefined)
            clearTimeout(timerID);
        var tm = $('#tm_timeline');
        var left = tm.position().left;
        var newl = left + offset;
        var maxl = (0 - (tm.width() - $('#tm_place').width()));
        if (newl > 0 && newl > maxl)
            moveto_timeline(tm, 0);
        else if (newl <= 0 && newl <= maxl)
            moveto_timeline(tm, maxl);
        else if (newl <= 0 && newl > maxl)
            moveto_timeline(tm, newl);
        //debug(tm.css('left'));
    }
    function moveto_timeline(tm, position) {
        tm.css('left', position);
        check_scrollbutton_status(tm);
    }
    function check_scrollbutton_status() {
        var tm = $('#tm_timeline');
        var left = tm.position().left;
        var maxl = (0 - (tm.width() - $('#tm_place').width()));

        hidescrollobj();
        // prev page button
        if (scroll_back) {
            if (left < 0)
                scroll_back.show();
        }
        // next page button
        if (scroll_next) {
            if (left > maxl)
                scroll_next.show();
        }
    }
    function hidescrollobj() {
        scroll_back.hide();
        scroll_next.hide();
    }
    function mousewheel(e, delta) {
        move_timeline(delta * 100);
        e.preventDefault();
    }

    function debug(msg) {
        var place = $('#tm_debugplace');
        var dbg = $('#tm_debug');
        dbg.html(msg + '<br />' + dbg.html());
        var offset = place.offset();
        var doch = $(document).height();
        var objh = offset.top + place.height();
        place.show();
        if (objh + 100 > doch) {
            place.height(place.height()).css('overflow', 'scroll');
        }
    }

})(jQuery);