var ban = ["vyunhua", "acappella515", "loctlox", "kirinukiya"];
var entries = new Array();
var video_num = 40;
var line_num = 5;

function parse(json) {
    var feeds = json.feed.entry;
    // 各動画のauthorがbanに含まれているかどうかを調べて、含まれていない動画のfeed配列を作成。配列に40個のオブジェクトが収まったらDOMオブジェクトの作成に入る
    for(var i = 0; i < feeds.length; i++) {
        var author = feeds[i].author[0].name.$t;
        var flag = false;
        for(var j = 0; j < ban.length; j++) {
            if(author == ban[j]) {
                flag = true;
            }
        }
        if(!flag) {
            entries.push(feeds[i]);
        }
        if(entries.length >= video_num) {
            jsonp(entries);
            break;
        }
    }
}

function jsonp(feeds) {

    var items = document.getElementById("videos-slider");
    var item = new Array(video_num);
    // =>40
    var item_container = new Array(video_num / line_num);

    //var gallery = new Array(video_num / 4); // =>10
    //var gallery_container = new Array(video_num / 8); // =>5

    // item_containerのオブジェクト配列作成 => 10個
    for(var i = 0; i < video_num / line_num; i++) {
        item_container[i] = document.createElement("div");
        item_container[i].className = "item-container";
        //item_container[i].style.cssFloat = "left";
	item_container[i].style.width = "875px";
	item_container[i].style.height = "159px";
	item_container[i].style.position = "absolute";
	item_container[i].style.top = "0px";
	item_container[i].style.left = i * 875 + "px";
    }

    // itemのオブジェクト配列を作成
    for(var i = 0; i < video_num; i++) {
        item[i] = document.createElement("div");
        item[i].style.background = "url(http://loilo.tv/upload/file/3897/pic.png)";
        item[i].style.width = "148px";
        item[i].style.height = "111px";
        item[i].style.padding = "42px 6px 6px 5px";
        item[i].style.textAlign = "center";
        item[i].style.position = "absolute";
        //item[i].style.cssFloat = "left";
        //item[i].style.overflow = "hidden";
        //if((i + 1) % line_num != 0) {
        //    item[i].style.marginRight = "20px";
        //}
	item[i].style.top = "0px";
	item[i].style.left = i % 5 * 179 + "px";

        a = document.createElement("a");
        a.title = entries[i].title.$t;
        if(entries[i].content == undefined)
            a.href = "";
        else
            a.href = entries[i].content.src.substring(0, 36) + "&hd=1";
        a.rel = "shadowbox;width=798px;height=474px;";
        a.id = "video" + i;
        a.className = "video-item";
        a.name = entries[i].author[0].name.$t;

        var img = document.createElement("img");
        img.src = entries[i].media$group.media$thumbnail[0].url;

        img.style.width = "148px";
        img.style.height = "111px";
        img.style.borderStyle = "none";
        img.className = "";

        a.appendChild(img);
        item[i].appendChild(a);
    }

    // 1つのitemオブジェクトに対して4つのaオブジェクトを子要素として追加
    for(var i = 0; i < video_num / line_num; i++) {
        for(var j = 0; j < line_num; j++) {
            item_container[i].appendChild(item[i * line_num + j]);
        }
        var br = document.createElement("br");
        br.style.clear = "both";
        item_container[i].appendChild(br);
    }

    // itemsにgellery_containerを子要素として追加
    for(var i = 0; i < video_num / line_num; i++) {
        items.appendChild(item_container[i]);
    }

}



(function($) {
    $(function(){
        var imageWidth = 875;
        var imageSum = $(".item-container").size();
        //2
        var imageReelWidth = imageWidth * imageSum;
	var currentPosition = 0;
        var stop = false;

        $("#videos-slider").css({'width' : imageReelWidth});
        

	rotateLeft = function() {
            if (currentPosition >= 0) {
            	currentPosition = imageWidth - imageReelWidth;
            } else {
                currentPosition = currentPosition + imageWidth;
            }
            $("#videos-slider").animate(
                {left: currentPosition},
                800
            );
        };

	rotateRight = function() {
            if (currentPosition <= imageWidth - imageReelWidth) {
                currentPosition = 0;
            } else {
                currentPosition = currentPosition - imageWidth;
            }
            $("#videos-slider").animate(
                {left: currentPosition},
                800
            );
        };
        
        rotateSwitch = function(){
            play = setInterval( function(){
                rotateRight();
            }, 3000);
        };
        
        rotateSwitch();
        
        //when pointer on a picture, picture wont slide
        $("#videos-slider").hover( function(){
            clearInterval(play);
        }, function() {
            if (!stop) {
                rotateSwitch();
            }
        });
        
        $("#sb-container").hover( function(){
            clearInterval(play);
        }, function() {
            if (!stop) {
                rotateSwitch();
            }
        });

        
        $("#move-left").click( function(){
            clearInterval(play);
            rotateLeft();
            stop = true;
            return false;
        });

        $("#move-right").click( function(){
            clearInterval(play);
            rotateRight();
            stop = true;
            return false;
        });

	$(".video-item").click ( function() {
            return false;
        });
    });
})(jQuery);