$(function() {
    $.getJSON('xss.php', function(json) {
        var reg = new RegExp(/((https?|ftp)(:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+))/);
        var maxLength1 = [20, 55, 35, 35, 25, 25, 55, 35, 25];
        var maxLength2 = [25, 55, 35, 55, 20, 35, 35, 25, 25];
        var maxLength3 = [25, 25, 35, 35, 20, 55, 25, 55, 25];
        var filterJson = array_chunk(json.reverse(), 9, 3);
        displayWithFadeIn(filterJson[0], $('#box01'), maxLength1);
        display(filterJson[1], $('#box02'), maxLength2);
        display(filterJson[2], $('#box03'), maxLength3);
        var interval = 15000;
        var e = $('#tweet-box');
        var slideElem = $('#slideLeft, #slideRight');
        var slideLeftButton = $('#slideLeft a');
        var slideRightButton = $('#slideRight a');
        var duration = 1200;
        var easing = 'easeOutCirc';

        var completeFunc = function(left) {
            return function() {
                slideElem.fadeIn();
                if (left == 0) slideLeftButton.css({opacity: 0.0, cursor: 'default'});
                else slideLeftButton.css({opacity: 1, cursor: 'pointer'});
                if (left < -986 ) slideRightButton.css({opacity: 0.0, cursor: 'default'});
                else slideRightButton.css({opacity: 1, cursor: 'pointer'});
            }
        };
        
        var f = function() {
            slideElem.hide();
            var func = arguments.callee;
                var pos = e.position();
				if(pos)
				{
                    var left = pos.left < -986 ? 0 : pos.left - 986;
					e.animate({left: left}, {duration: duration, easing: easing, complete: completeFunc(left)});
				}
		};
        
        var timeId = setInterval(f, interval);
        
        $('#slideLeft a').click(function(event) {
            event.preventDefault();event.stopPropagation();
            if (e.position().left < 0) {
                slideElem.hide();
                clearTimeout(timeId);
                var left = e.position().left + 986;
                e.animate({left: left}, {duration: duration, easing: easing, complete: completeFunc(left)});
                timeId = setInterval(f, interval);
            }
        });
        
        $('#slideRight a').click(function(event) {
            event.preventDefault();event.stopPropagation();
            if (e.position().left >= -986) {
                slideElem.hide();
                clearTimeout(timeId);
                var left = e.position().left - 986;
                e.animate({left: left}, {duration: duration, easing: easing, complete: completeFunc(left)});
                timeId = setInterval(f, interval);
            }
        });

        function display(array, elm, maxLength) {
            $(array).each(function(i, elem) {
                var wrap = $('<div class="in-box' + ("0" + (i + 1)).substr(-2) + '">').css({cursor: 'pointer'});
                wrap.append($('<p class="tweet-contents">').html(truncate(elem['text'], maxLength[i])));
				var OS=detect().OS;
				var time=(OS=='Mac')?elem['created_at']:elem['created_at_ie']*1000;
                wrap.append($('<p class="tweet-info">').append($('<span>').append('@' + elem['user']['screen_name'])).append(elapse(time)));
                elm.append(wrap);
                wrap.click(function(event) {
                    clearTimeout(timeId);
                    var shadowLayer = $('<div id="shadow">');
                    var fWin = $('<div id="fWin">');
                    var closeButton = $('<div id="closeButton">').html('×');
                    $('#tweet-flame').append(shadowLayer).append(fWin);
                    fWin.animate({top: 87, opacity: 1.0}, {complete: function() {
                        $(this).append(closeButton.click(function(event) {
                            fWin.fadeOut('fast', function() {
                                shadowLayer.fadeOut('fast');
                                timeId = setInterval(f, interval);
                            });
                        }));
                    }}).append($('<div>').html(linkActive(reg, elem['text']))).append($('<p class="account">').append($('<a>').attr({href: 'http://twitter.com/' + '@' + elem['user']['screen_name'], target: '_blank'}).html('@' + elem['user']['screen_name'])).append(elapse(time)));
                });
            });
        }
        
        
        function displayWithFadeIn(array, elm, maxLength) {
            $(array).each(function(i, elem) {
                var wrap = $('<div class="in-box' + ("0" + (i + 1)).substr(-2) + '">').css({cursor: 'pointer'});
                wrap.append($('<p class="tweet-contents">').hide().html(truncate(elem['text'], maxLength[i])));
				var OS=detect().OS;
				var time=(OS=='Mac')?elem['created_at']:elem['created_at_ie']*1000;
                wrap.append($('<p class="tweet-info">').append($('<span>').append('@' + elem['user']['screen_name'])).append(elapse(time)));
                elm.append(wrap);
                setTimeout(function() {
                    wrap.find('p.tweet-contents').fadeIn();
                }, i * 100);
                wrap.click(function(event) {
                    clearTimeout(timeId);
                    var shadowLayer = $('<div id="shadow">');
                    var fWin = $('<div id="fWin">');
                    var closeButton = $('<div id="closeButton">').html('×');
                    $('#tweet-flame').append(shadowLayer).append(fWin);
                    fWin.animate({top: 87, opacity: 1.0}, {complete: function() {
                        $(this).append(closeButton.click(function(event) {
                            fWin.fadeOut('fast', function() {
                                shadowLayer.fadeOut('fast');
                                timeId = setInterval(f, interval);
                            });
                        }));
                    }}).append($('<div>').html(linkActive(reg, elem['text']))).append($('<p class="account">').append($('<a>').attr({href: 'http://twitter.com/' + '@' + elem['user']['screen_name'], target: '_blank'}).html('@' + elem['user']['screen_name'])).append(elapse(time)));
                });
            });
            elm.fadeIn(1500);
        }
    });
});

function array_chunk(array, size, chunk) {
    var returnArray = [];
    var tmpArray = [];
    for (var i = 0, arrayCnt = 1; i < array.length, arrayCnt <= chunk; i++) {
        tmpArray.push(array[i]);
        if (tmpArray.length == size) {
            returnArray.push(tmpArray);
            tmpArray = [];
            arrayCnt++;
        }
    }
    return returnArray;
}

function truncate(str, length, truncation) {
    length = length || 30;
    truncation = truncation === undefined ? '...' : truncation;
    return str.length > length ?
      str.slice(0, length - truncation.length) + truncation : str;
}

function digit (num) {
    if (num < 10) {num = ' ' + num;}
    return num;
}

function elapse(getEntryDate) {
    var currentDate = new Date();
    var entryDate = new Date(getEntryDate);
    var elapsedTime = (currentDate.getTime() - entryDate.getTime()) / 1000;
    elapsedTime = Math.ceil(elapsedTime);
    var message = null;
    if (elapsedTime < 60) { //  1 分未満
        message =  'たった今';
    } else if (elapsedTime < 120) { //  2 分未満
        message =  '約 1分前';
    } else if (elapsedTime < (60*60)) { //  1 時間未満
        message =  '約' + digit(Math.floor(elapsedTime / 60)) + '分前';
    } else if (elapsedTime < (120*60)) { //  2 時間未満
        message =  '約 1時間前';
    } else if (elapsedTime < (24*60*60)) { //  1 日未満
        message =  '約' + digit(Math.floor(elapsedTime / 3600)) + '時間前';
    } else if (elapsedTime < (7*24*60*60)) { // 1 週間未満
        message =  '約' + digit(Math.floor(elapsedTime / 86400)) + '日前';
    } else { // 1 週間以上
        message =  '約' + digit(Math.floor(elapsedTime / 604800)) + '週間前';
    }
    return message;
}

function displayWithFadeIn(array, elm, maxLength) {
    $(array).each(function(i, elem) {
        var wrap = $('<div class="in-box' + ("0" + (i + 1)).substr(-2) + '">');
        wrap.append($('<p class="tweet-contents">').hide().html(truncate(elem['text'], maxLength[i])));
        wrap.append($('<p class="tweet-info">').append($('<span>').append('@' + elem['user']['screen_name'])).append(elapse(elem['created_at'])));
        elm.append(wrap);
        setTimeout(function() {
            wrap.find('p.tweet-contents').fadeIn();
        }, i * 100);
    });
    elm.fadeIn(1500);
}

function linkActive(r, s) {
	
	return extractLink(s);
	
}