/* onloadイベントを追加 */
/*
jQuery.event.add(window, "load", function(){
$initMainImage();
 });

*/

//jQuery
jQuery.event.add(window, "load", function(){
initMainImage();
//$(function(){
    /**
    * メイン画像切り替え機能を初期化する
    */
    function initMainImage(){
        var CHANGE_TIME = 5000;
        var FADEIN_DURATION = 500;
        
        var currentNum = 0;
        var $container= $("ul.special_image");
        var $li = $("ul.special_image li");
        var len = $li.length;
        var players = [];
        var $displayArea;
        var zindex = len;
		var btnOvered = false;
        
        init();

        function init(){    
            initStyle();
            // intro();
            setEventHandler();
            startTimer();
        }
        
        var timerID;
        function startTimer(){
            stopTimer();
            timerID = setTimeout(function(){
                var idx = currentNum+1;
                if(idx>len-1){
                    idx = 0;
                }
                update(idx);                
            },CHANGE_TIME);
        }
        function stopTimer(){
            clearInterval(timerID);
        }

        function initStyle(){
            $li.css({
                "display":"none",
                "position":"absolute"
            });    
            $container.css({
                "display":"block",
                "position":"relative"
            });
            $li.eq(0).css("display","block");
            
            $("ul.special_btn").css("display","block");
            $("ul.special_btn li").css("backgroundColor","#000000")
			.find("img").css("opacity",0.7);
            $("ul.special_btn li:eq(0) img").css("opacity",1);
        }

        function intro(){
            $li.eq(currentNum).css({
                "opacity":0
            }).animate({"opacity":1},{"duration":500});
            
            $(".special_btn li").css({
                "opacity":0
            }).animate({"opacity":1},{"duration":500})
        }

        function setEventHandler(){
            $(".special_btn a")
            .mouseover(function(e){
                var idx =$(".special_btn a").index(this);
                stopTimer();
				btnOvered = true;
                update(idx);
            })
            .mouseout(function(e){
				btnOvered = false;
                startTimer();
            });
            
            $(".special_image")
            .mouseover(function(e){
				btnOvered = true;
                stopTimer();
            })
            .mouseout(function(e){
				btnOvered = false;
                startTimer();
            });
        }
        
        function update(idx){
            if(idx != currentNum){
                changeThumbnail(idx);
                changeMainImage(idx);
                currentNum = idx;
            }
        }
        
        function changeThumbnail(idx){
            $(".special_btn a").eq(currentNum).children("img").css({opacity:0.7});
            // $(".list-btn a").eq(currentNum).children("img").stop().animate({opacity:0.7},{duration:200});
            $(".special_btn a").eq(idx).children("img").css({opacity:1});
            // $(".list-btn a").eq(idx).children("img").stop().animate({opacity:1},{duration:200});
        }
    
        function changeMainImage(idx){
            var $tgt = $li.eq(idx);

            $container.css({
                "background-color":"#DEDEDE",
                "width":'719',
                "height":'351'
            });
            $li.css("display","none");
            $tgt.css({
                "opacity":0.1,
                "display":"block"
            }).stop().animate({"opacity":1},{
                "duration":FADEIN_DURATION
            });                       
			if(!btnOvered)startTimer();
        }        
    }    
});