$(document).ready(function(){
    var TopImagelines = new Array();//glo
    var TopBtnSum = 1;//glo
    var TopFadeSpeed = "slow";
    var AutoFadeSpeed = 4000;
    var TopImageIndex = 1;//glo
    var TopImageClickNo;//glo
    var TopImagelineNo;//glo
    var TopImageFadeNow = 0;//glo
    $.get("./csv/pc_index_top_img.csv", function(data){
        var csv_data;
        var len;
        var csv_data = data.split("\n");
        csv_data.shift();
        len = csv_data.length;
        for(var i = 0; i < len; i++){
          if(csv_data[i].length < 1){continue;}
          csv_data[i].replace("\n","");
          TopImagelines[i] = csv_data[i].split(",");
        }
        // auto preload img & load/init img
        TopBtnSum = TopImagelines.length;
        for( var j = 0; j < TopImagelines.length; j++){
            for( var k = 0; k < TopImagelines[j].length; k++){
                reg = new RegExp(".+.jpg|png|gif$", "i");
                if(TopImagelines[j][k].match(reg)){
                    //alert(TopImagelines[j][k]);
                    $("<img>").attr("src", TopImagelines[j][k]);
                    $("#btn_img" + (j + 1)).attr("src", TopImagelines[j][0]);
                    $("#top_main_img" + (j + 1) + " a img").attr("src", TopImagelines[j][4]);
                    $("#top_main_img" + (j + 1) + " a").attr("href", TopImagelines[j][3]);
                }
            }
        }
        $("#top_main_img"+ TopImageIndex).fadeIn("500");
        $("#button" + String(TopImageIndex) + " img").attr("src", TopImagelines[TopImageIndex-1][2]);
        $("#button" + String(TopImageIndex) + " img").css("cursor", "default");
        $("#button" + String(TopImageIndex) + " img").data("status", "mousedown");
    });
    var AutoFadeStart = function(auto_fade_mode){
        // auto_fade_mode = 1; auto_fade_mode
        // auto_fade_mode = 2; UserMode
        if(auto_fade_mode == 1){
            var topImageInterval = AutoFadeSpeed;
            timer = setInterval(function(){
                if(TopImageFadeNow == 0){
                    TopImageFadeNow = 1;
                    $("#top_main_img"+ String(TopImageIndex)).fadeOut(TopFadeSpeed, function() {
                    	var src1 = "";
                    	if(TopImagelines[TopImageIndex-1][0]!=null&&TopImagelines[TopImageIndex-1][0]!=undefined&&TopImagelines[TopImageIndex-1][0]!=""){
                    		src1  = TopImagelines[TopImageIndex-1][0];
                    	}
                        $("#button" + String(TopImageIndex) + " img").attr("src", src1);
                        $("#button" + String(TopImageIndex) + " img").data("status", "");
                        $("#button" + String(TopImageIndex) + " img").css("cursor", "pointer");
                        TopImageIndex += 1;
                        if(TopImageIndex == 5){TopImageIndex = 1;}
                        var src2 = "";
                        if(TopImagelines[TopImageIndex-1][2]!=null&&TopImagelines[TopImageIndex-1][2]!=undefined&&TopImagelines[TopImageIndex-1][2]!=""){
                        	src2 =  TopImagelines[TopImageIndex-1][2];
                        }
                        $("#button" + String(TopImageIndex) + " img").attr("src", src2);
                        $("#button" + String(TopImageIndex) + " img").css("cursor", "default");
                        $("#button" + String(TopImageIndex) + " img").data("status", "mousedown");
                        $("#top_main_img"+ TopImageIndex).fadeIn(TopFadeSpeed, function(){
                            TopImageFadeNow = 0;
                        });
                    });
                }else{
                    clearInterval(timer);
                }
            }, topImageInterval);
        }else{
            clearInterval(timer);
        }
    };


    var TopFadeAction = function(element){
        var timer;
        var auto_fade_mode = 1;

        element.mousedown(function(){
            var clear_btn = function(target_no){
                for(var i = 0; i < TopBtnSum; i++){
                    m = target_no - 1;
                    if( m == i) continue;
                    img_num = i + 1;
                    $("#btn_img" + img_num).data("status", "");
                    $("#btn_img" + img_num).attr("src", TopImagelines[i][0]);
                    $("#btn_img" + img_num).css("cursor", "pointer");
                }
            };
            var fade = function(){
                $("#top_main_img"+(TopImageIndex)).fadeOut(TopFadeSpeed, function() {
                    $("#top_main_img" + TopImageClickNo).fadeIn(TopFadeSpeed,function(){
                        TopImageIndex = parseInt(TopImageClickNo);
                        TopImageFadeNow = 0;
                    });
                });
            };
            if(!is_mousedown(this)){
                if(TopImageFadeNow == 0){
                    TopImageFadeNow = 1;
                    AutoFadeStart(2);
                    get_click_no(element);
                    clear_btn(TopImageClickNo);
                    $(this).attr("src", TopImagelines[TopImagelineNo][2]);
                    $(this).css("cursor", "default");
                    $(this).data("status", "mousedown");
                    fade();
                }
            }
        }).mouseover(function(){
            AutoFadeStart(2);
            get_line_no(element);
            if( !is_mousedown(this) ){
                $(this).attr("src", TopImagelines[TopImagelineNo][1]);
            }
        }).mouseout(function(){
            AutoFadeStart(1);
            get_line_no(element);
            if( !is_mousedown(this) ){
                $(this).attr("src", TopImagelines[TopImagelineNo][0]);
            }
        });
        var get_click_no = function(element){
            TopImageClickNo = element.attr("id").charAt(7);
        };
        var get_line_no = function(element){
            TopImagelineNo  = element.attr("id").charAt(7) - 1;
        };
        var is_mousedown = function(ele){
            return ( $(ele).data("status") == "mousedown");
        };
    };

    AutoFadeStart(1);
    TopFadeAction($("#button1 img"));
    TopFadeAction($("#button2 img"));
    TopFadeAction($("#button3 img"));
    TopFadeAction($("#button4 img"));
});