;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 loading = $('<div class="loading">載入中...</div>');
        var debug = $('<div id="tm_debugplace"><div id="tm_debug"></div></div>');
        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);
        json_url = arguments[0];
        $(document).ready(function(){
            bindtimeline($('#tm_timeline'), json_url, 'newest');
        });
        
        // menu button
        if (arguments.length > 1)
            bindmenu($('#'+arguments[1]));
        // prev page button
        if (arguments.length > 2)
        {
            scroll_back = $('#'+arguments[2]);
            scroll_back.bind('click', move_prevpage).hide();
        }
        // next page button
        if (arguments.length > 3)
        {
            scroll_next = $('#'+arguments[3]);
            scroll_next.bind('click', move_nextpage).hide();
        }
        $(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);
        if(scroll_back) scroll_back.hide();
        if(scroll_next) scroll_next.hide();
        var qchar = '?';
        if (url.indexOf('?') != -1) qchar = '&';
        //$.getJSON(url + qchar + 'method=getjson&type=' + type,
        $.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 d1 = new Date();
                    var needblock = (data.ArrayOfInkDataJSON.block == 'true');
                    
                    if (needblock)
                        tm.append(topline);
                    
                    if (data.ArrayOfInkDataJSON.extra != undefined)
                        $('#sliderBox').find('#extra').html(data.ArrayOfInkDataJSON.extra);
                        
                    var eachObj;
                    
                    if(data.ArrayOfInkDataJSON.count == 1)
                        eachObj = data.ArrayOfInkDataJSON;
                    else
                        eachObj = data.ArrayOfInkDataJSON.InkDataJSON;
                    $.each(eachObj, function(i, item){
                        if (typeof item == 'object')
                        {
                            var reply = '';
                            if (item.UnReadReply == 'true')
                                reply = '<span id="unread"><a href="'+item.Ink_Url+'">'+item.Ink_Reply+'</a></span>'
                            else
                                reply = item.Ink_Reply;
                            var work = $('<div class="workBox" key="'+item.Ink_Key+'"></div>')
                                        .append($('<div class="memberBox"></div>')
                                                .append('<div class="memberPhotoBox"><img src="' + item.Author_Avatars + '" style="width:20px;height:20px;" /></div>')
                                                .append('<div class="memberNameBox"><a href="' + item.Author_Url + '">' + item.Author_Name + '</a></div>')
                                                .append('<div class="clear"></div>'))
                                        .append('<div class="imgBox"><a href="' + item.Ink_Url + '"><img src="' + item.Ink_Thumb + '" style="width:80px;height:80px;" title="' + item.Ink_Title + '" /></a></div>')
                                        .append('<div class="ink_icon"></div>')
                                        .append('<div class="viewTimesBox">瀏覽: <strong>' + item.Ink_Views + '</strong> 次</div>')
                                        .append('<div class="voteTimesBox">推 <strong>' + item.Ink_Pushs + '</strong> 次</div>')
                                        .append('<div class="voteTimesBox">回應 <strong>' + reply + '</strong></div>')
                                        .append('<div class="iconBox"></div>');
                            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();
                fiito_global_seticonalt();
            }
        );
    }
    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.hide();}, 300);
    }
    function bindmenu(menu){
        menu.find('a[type]').each(function(){
            $(this).bind('click', function(){
                menu.find('a[type]').each(function(){
                    $(this).attr('class', 'link_gray').parent().parent().attr('class', 'labelW_Lgray');
                });
                $(this).attr('class', 'link_white').parent().parent().attr('class', 'labelW_Mgray');
                var type = $(this).attr('type');
                if(current_type != type)
                    bindtimeline($('#tm_timeline'), json_url, type);
            });
        });
    }
    
    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);
    }
    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()));
        
        // prev page button
        if (scroll_back)
        {
            if (left < 0)
                scroll_back.show();
            else
                scroll_back.hide();
        }
        // next page button
        if (scroll_next)
        {
            if (left > maxl)
                scroll_next.show();
            else
                scroll_next.hide();
        }
    }
    function mousewheel(e, delta){
        move_timeline(delta * 100);
        //e.stopPropagation();
        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);