/******************
* HISTORY CONTAINER
* */
var HanwhaHistory = (function(){
    var $self = {
        init:function(){
            $self.setBtns();
            HistoryStep1.createContents();
            HistoryStep2.createContents();
            TweenMax.delayedCall(1, HistoryStep1.inMotion);
        },
        setBtns:function(){
            HistoryStep1.setBtns();
            HistoryStep2.setBtns();
        }
    }

    return $self;
})();

/********************
 * STEP 1
 * */
var is_tablet=false;
var HistoryStep1 = (function(){
    var SLICE_LINE_LEN = 200;
    var GUIDE_DOTS_LEN = 10;

    var $self = {
        createContents:function(){
            /*
             * 鞗愳潉 毵岆摛旮 鞙勴暅 line 靸濎劚
             * */
            for(var i = 0; i < SLICE_LINE_LEN; ++i){
                var dw = 2000/SLICE_LINE_LEN;

                TweenMax.to($(".line_dot").eq(i), 0, {width:dw, x:i*dw, y:598});
            }
        },
        setBtns:function(){
            var startBtn = $(".start_btn>a");

            HistoryStep1.startChangeMotion();
        },
        inMotion:function(){
            $self.introMotion(true);
            $self.gudieDotMotion(true);

            TweenMax.to($(".g_line"), 1, {css:{left:0, width:"100%"}});
        },
        startChangeMotion:function(){
            $(".g_line").hide();
            $(".lines").show();

            $self.introMotion(false);

            if(is_tablet){
                TweenMax.to($(".guide_line"), 0.5, {alpha:0})
                TweenMax.to($(".lines"), 0.5, {alpha:0})
                TweenMax.delayedCall(1.1, function(){
                    $(".guide_line").hide();
                    $(".lines").hide();
                    HistoryStep2.inMotion();
                });
            }else{

                $self.gudieDotMotion(false);

                // TweenMax.delayedCall(1, $self.circleChangeMotion);
                TweenMax.delayedCall(0.5, HistoryStep2.inMotion);
            }
        },
        introMotion:function(isIn){
            var introLi = $(".intro_box li");
            var len = introLi.size();
            for(var i = 0; i < len; ++i){
                var twObj = introLi.eq(i);

                if(isIn){
                    CustomTw.to(twObj, 0, {y:100});
                    CustomTw.to(twObj, 1.2, {delay:i*0.1, y:0, alpha:1, ease:Cubic.easeOut});
                }else{
                    CustomTw.to(twObj, 0.7, {y:-50, alpha:0, ease:Cubic.easeIn});
                }
            }
        },
        gudieDotMotion:function(isIn){
            var prev = GUIDE_DOTS_LEN/2;
            var next = GUIDE_DOTS_LEN/2;
            for(var n = 0; n < GUIDE_DOTS_LEN/2; ++n){
                prev--;
                for(var z = 0; z < 2; ++z){
                    var c = next;
                    if(z == 0) c = prev;
                    if(isIn) TweenMax.to($(".guide_dot").eq(c), 1.5, {delay:n*0.1, css:{left:c*(GUIDE_DOTS_LEN)+"%", opacity:1}, ease:Cubic.easeOut});
                    else {
                        TweenMax.to($(".guide_dot").eq(c), 1, {alpha:0});
                        TweenMax.to($(".guide_dot").eq(c), 0.3, {delay:n*0.1, css:{left:"50%"}, ease:Cubic.easeOut});
                    }
                }
                next++;
            }
        },
        circleChangeMotion:function(){
            var radius = 290;
            var lineLen = 200;
            var margin = {top:114+radius, left:713+radius};

            for(var i = 0; i < lineLen; ++i){
                var posx = margin.left+radius * Math.sin(2*i*Math.PI/lineLen);
                var posy = margin.top+radius * Math.cos(2*i*Math.PI/lineLen);
                var rotate = i/lineLen*360;

                TweenMax.to($(".line_dot").eq(i), 1.5, { x:posx, y:posy, width:10, height:1, alpha:0.3, rotation:-rotate, ease:Expo.easeInOut});
            }
        }
    }

    return $self;
})();

/************************
 * STEP 2
 * */
var HistoryStep2 = (function(){
    var strokeCircle = null;
    var strokeCircular = {st:0, en:0};
    var strokeCount = 0;
    var prevIdx = 0;
    var isMouseOver = false;
    var isMouseLock = false;
    var isDetailOpen = false;
    var selectCountObj = {d1:0, d2:0};
    var sectionEndPointArr = [4, 4, 4, 4, 4];

    var $self = {
        createContents:function(){
            var guideCircleCanvas = document.getElementById("guide_circle_canvas");
            var strokeCircleCanvas = document.getElementById("stroke_circle_canvas");
            var guideCircle = guideCircleCanvas.getContext("2d");
            strokeCircle = strokeCircleCanvas.getContext("2d");

            guideCircle.beginPath();
            guideCircle.strokeStyle = "rgba(255, 255, 255, 0.3)";
            guideCircle.lineWidth = 1;
            guideCircle.arc(292, 292, 290, 0, 2*Math.PI, false);
            guideCircle.stroke();

            strokeCircle.beginPath();
            strokeCircle.strokeStyle = "#9f223d";
            strokeCircle.lineWidth = 3;
            strokeCircle.arc(292, 292, 290, strokeCircular.st, strokeCircular.en, false);
            strokeCircle.stroke();

            var circleDots = $(".circle_dots li");
            var circleDotsLen = circleDots.size();
			
            for(var i = 0; i < circleDotsLen; ++i){
                var posx = 307 * Math.sin(2*i*Math.PI/circleDotsLen);
                var posy = 307 * Math.cos(2*i*Math.PI/circleDotsLen)*-1;
                circleDots.eq(i).css({top:posy, left:posx});
            }
        },
        setBtns:function(){
            var circleDotBtns = $(".circle_dots li a");
                 //detailBtns = $(".detail_btn>a"),
                 //detailPopupClose = $(".detail_popup .close_btn"),
                 //detailArrowBtns = $(".detail_btns>.arrow>a"),
                 //otherBtn = $(".other_show>a");

            /*
            * STEP2 鞐愳劀 鞗愴槙 氩勴娂 鞓る矂 韥措Ν 須臣
            * */
            circleDotBtns.mouseover(function(){ $self.circleMouseEvent($(this), "mouseover");})
                         .mouseout(function(){ $self.circleMouseEvent($(this), "mouseout"); })
                         // .click(function(){ $self.circleMouseEvent($(this), "click"); })

            /*
            * STEP2 鞐愳劀 鞛愳劯頌 氤搓赴 氩勴娂
            * */
    //         detailBtns.click(function(){
    //             var idx = parseInt($(this).attr("data-index"));
				// console.log(idx+'+++')
    //             var activeIdx = 0;
    //             if(idx == 1) activeIdx = 6;
    //             if(idx == 2) activeIdx = 10;

    //             selectCountObj.d1 = idx+1;
    //             selectCountObj.d2 = 1;

    //             circleDotBtns.removeClass("active");
    //             circleDotBtns.eq(activeIdx).addClass("active");

    //             $self.showDetailPopup();
    //             $self.circleMouseInteraction(activeIdx, true);
    //         }).mouseover(function(){
    //             var idx = parseInt($(this).attr("data-index"));
    //             var activeIdx = 0;
    //             if(idx == 1) activeIdx = 6;
    //             if(idx == 2) activeIdx = 10;
    //             $self.circleMouseEvent($(circleDotBtns).eq(activeIdx), "mouseover");
    //         }).mouseout(function(){
    //             var idx = parseInt($(this).attr("data-index"));
    //             var activeIdx = 0;
    //             if(idx == 1) activeIdx = 6;
    //             if(idx == 2) activeIdx = 10;
    //             $self.circleMouseEvent($(circleDotBtns).eq(activeIdx), "mouseout");
    //         })

            // detailPopupClose.click(function(){
            //     $self.hideDetailPopup();
            // })

            // detailArrowBtns.click(function(){
            //     var idx = $(this).index();

            //     $self.changeDetailPopup(idx);
            // })

            /*
            * 頃橂嫧 雿旊炒旮 氩勴娂
            * */
            // otherBtn.click(function(){
            //     var detailList = $(".detail_list");
            //     var detailListSpan = otherBtn.find("span");
            //     var detailListIcon = otherBtn.find(".icon");

            //     if(!isDetailOpen){
            //         var closeText = (is_en)?"CLOSE":"雼赴";

            //         isDetailOpen = true;
            //         CustomTw.to(detailList, 0.8, {height:((is_en)?1850:1300)});
            //         TweenMax.to(detailListIcon, 0, {rotation:45});
            //         detailListSpan.html(closeText);
            //     }else{
            //         var moreText = (is_en)?"MORE":"雿旊炒旮?;

            //         isDetailOpen = false;
            //         CustomTw.to(detailList, 0.8, {height:360});
            //         TweenMax.to(detailListIcon, 0, {rotation:0});
            //         detailListSpan.html(moreText);
            //     }
            // })
        },
        circleMouseEvent:function(scope, type){
            //if(isMouseLock) return;
            var circleDotBtns = $(".circle_dots li a");

            switch (type){
                case "mouseover" :
                    var idx = parseInt($(scope).attr("data-index")),
                        section = parseInt($(scope).attr("data-d1"))-1;

                    $self.circularLock();
                    $self.circleMouseInteraction(idx, true);
                    if(!isMouseLock) {
                        $self.circularMotion(section);
                        strokeCount = section;
                    }
                    break;
                case "mouseout" :
                    var idx = parseInt($(scope).attr("data-index"));

                    $self.circleMouseInteraction(idx, false);
                    if(!isMouseLock) TweenMax.delayedCall(0.5, $self.circularUnLock);
                    break;
                case "click" :
                    var d1 = parseInt($(scope).attr("data-d1")),
                        d2 = parseInt($(scope).attr("data-d2"));

                    circleDotBtns.removeClass("active");
                    $(scope).addClass("active");

                    selectCountObj.d1 = d1;
                    selectCountObj.d2 = d2;

                    $self.showDetailPopup();

                    if(isMouseLock) {
                        strokeCount = d1-1;
						
                        $self.circularMotion(strokeCount);
                        $self.circleMouseEvent($(circleDotBtns).eq(0), "mouseout");
                    }
                    break;
            }
        },
        inMotion:function(){
            $(".circle_line").show();
            $(".circle_dots").show();
            $(".lines").hide();
            $(".intro").hide();
            $(".step2").show();

            var step2Obj = $(".step2");
            CustomTw.to(step2Obj, 0, {y:50, alpha:0});
            CustomTw.to(step2Obj, 1, {delay:0.2, y:0, alpha:1, ease:Cubic.easeOut});
            TweenMax.to($(".details").eq(0), 0, {autoAlpha:1});

            /*
            * CIRCLE IN MOTION
            * */
            var circleDots = $(".circle_dots li");
            var circleDotsLen = circleDots.size();

            for(var i = 0; i < circleDotsLen; ++i){
                var twObj = circleDots.eq(i);
                TweenMax.to(twObj, 0, {y:10});
                TweenMax.to(twObj, 0.8, {delay:i*0.05, y:0, alpha:1, ease:Cubic.easeOut});
            }

            $self.circularMotion(0);
        },
        /*
        * CIRCLE MOTION
        * */
        circleMouseInteraction:function(idx, isOver){
            var circleDotBtn = $(".circle_dots li a:not(.active)");
            var currentDotBtn = $(".circle_dots li.btn_dot_"+idx+" a");

            if(isOver){
                // TweenMax.to($(".border_line", currentDotBtn), 0.3, {x:-7, y:-7, width:19, height:19, borderRadius:"50%", ease:Cubic.easeOut});
                TweenMax.to($(".small_circle", currentDotBtn), 0.3, {backgroundColor:"#f27824", ease:Cubic.easeOut});
                if($("span", currentDotBtn).hasClass("left")) TweenMax.to($("span.left", currentDotBtn), 0.5, {x:21, alpha:1, ease:Cubic.easeOut});
                else TweenMax.to($("span.right", currentDotBtn), 0.5, {x:-21, alpha:1, ease:Cubic.easeOut});
            }else{
                // TweenMax.to($(".border_line", circleDotBtn), 0, {x:0, y:0, width:5, height:5, borderRadius:"50%", ease:Cubic.easeOut});
                TweenMax.to($(".small_circle", circleDotBtn), 0.1, {backgroundColor:"#fff", ease:Cubic.easeOut});
                TweenMax.to($("span", circleDotBtn), 0.2, {x:0, alpha:0, ease:Cubic.easeOut});
            }
        },
        circularLock:function(){
            isMouseOver = true;
            TweenMax.killDelayedCallsTo($self.circularUnLock);
        },
        circularUnLock:function(){
            isMouseOver = false;
            $self.circularMotion(strokeCount);
        },
        circularMotion:function(idx){
            var posST = 0;
            var posEN = 0;
            switch (idx){
                case 0 :
                    posST = 0;
                    posEN = 72*Math.PI/180;
                    break;
                case 1 :
                    posST = 72*Math.PI/180;
                    posEN = 144*Math.PI/180;
                    break;
                case 2 :
                    posST = 144*Math.PI/180;
                    posEN = 216*Math.PI/180;
                    break;
                case 3 :
                    posST = 216*Math.PI/180;
                    posEN = 288*Math.PI/180;
                    break;
                case 4 :
                    posST = 288*Math.PI/180;
                    posEN = 360*Math.PI/180;
                    break;		
					
            }

            /*
            * circle 鞚 攴鸽牑歆€電 氇厴
            * circle 鞚 攴鸽牑歆 頉 complete 霅橂┐ 靷澕歆€電 氇厴鞚 氚旊 鞁ろ枆霅滊嫟
            * delay 電 靷澕歆€電 氇厴 韸胳湀鞐 瓯胳柎欷
            * */
            $self.circleMotionTween(posST, posEN, function(){
                if(isMouseOver) return;
                /*
                * CIRCLE LOOPING MOTION (circle 鞚 靷澕歆€電 氇厴)
                * */
                $self.circleMotionTween(posEN, posEN, function(){
                    if(strokeCount == 4) {
                        strokeCircular.st = 0;
                        strokeCircular.en = 0;
                        strokeCount = 0;
                    }else strokeCount++;
                    $self.circularMotion(strokeCount);
                });
                var posidx = idx+1;
                if(posidx == 5) posidx = 0;
                $self.descChange(posidx);
            });

            if(isMouseOver) $self.descChange(idx);
        },
        circleMotionTween:function(posST, posEN, callBack){
            var duration = (isMouseOver)?1:(posST == posEN)?2:2;
            var delay = (isMouseOver)?0:(posST == posEN)?0:0; //looping delay 鞁滉皠 臁办爤 (isMouseOver)?0:(posST == posEN)?2:0
            TweenMax.to(strokeCircular, duration, {delay:delay, st:posST, en:posEN, onUpdate:function(){
                strokeCircle.clearRect(0, 0, 584, 584)
                strokeCircle.beginPath();
                strokeCircle.arc(292, 292, 290, strokeCircular.st, strokeCircular.en, false);
                strokeCircle.stroke();
            }, onComplete:callBack, ease:(isMouseOver)?Expo.easeOut:Expo.easeInOut})
        },
        /*
        * DESC CHANGE MOTION
        * */
        descChange:function(idx){
            if(idx == prevIdx) return;
            var overDelay = (isMouseOver)?0:1.5;
            var outDelay = (isMouseOver)?0:1;
            var overDuration = (isMouseOver)?0.8:0.8;
            var outDuration = (isMouseOver)?0.5:0.8;
            var detailAllObj = $(".details");
            var detailObjlen = detailAllObj.size();
			

            for(var i = 0; i < detailObjlen; ++i){
                var detailObj = $(".detail_"+(i+1));

                if(i == idx) {
                    TweenMax.killTweensOf(detailObj);

                    if(isMouseOver){
                        TweenMax.to(detailObj, 0, {css:{opacity:0}})
                        TweenMax.to(detailObj, overDuration, {css:{opacity:1}, ease:Cubic.easeOut});
                    }else{
                        CustomTw.to(detailObj, 0, {scale:0.8, alpha:0})
                        CustomTw.to(detailObj, overDuration, {delay:overDelay, scale:1, alpha:1, ease:Cubic.easeOut});
                    }

                    //detailObj.css("pointer-events", "auto");
                    detailObj.css("z-index", 1);
                }else{
                    TweenMax.killTweensOf(detailObj);
                    if(isMouseOver){
                        TweenMax.to(detailObj, outDuration, {css:{opacity:0}, ease:Cubic.easeOut});
                    }else{
                        CustomTw.to(detailObj, outDuration, {delay:outDelay, scale:1, alpha:0, ease:Cubic.easeOut});
                    }

                    //detailObj.css("pointer-events", "none");
                    detailObj.css("z-index", 0)
                }
            }

            prevIdx = idx;
        },
        /*
        * DETAIL POPUP SHOW HIDE
        * */
        showDetailPopup:function(){
            isMouseLock = true;
            var d1 = selectCountObj.d1;
            var d2 = selectCountObj.d2;

            $self.circularLock();

            TweenMax.killDelayedCallsTo($self.allHideDetailPopup);
            $(".detail_box").hide();
            $(".detail_popup").show();
            $(".detail_popup_"+d1+"_"+d2).show();

            TweenMax.to($(".detail_popups"), 0, {alpha:0});
            TweenMax.to($(".detail_popup_"+d1+"_"+d2), 0, {alpha:1});

            CustomTw.to($(".detail_popup"), 0, {scale:1.23, alpha:0});
            CustomTw.to($(".detail_popup"), 0.8, {scale:1, alpha:1, ease:Cubic.easeOut});

            $self.arrowStateChange();
        },
        hideDetailPopup:function(){
            isMouseLock = false;
            var circleDotBtns = $(".circle_dots li a");
            circleDotBtns.removeClass("active");

            $self.circularUnLock();
            $self.circleMouseInteraction(0, false);

            $(".detail_box").show();
            CustomTw.to($(".detail_popup"), 0.6, {perspective:"1000px", rotateY:0, alpha:0});
            TweenMax.delayedCall(1, $self.allHideDetailPopup);
        },
        allHideDetailPopup:function(){
            $(".detail_popup").hide();
        },
        changeDetailPopup:function(type){
            var d1 = selectCountObj.d1,
                d2 = selectCountObj.d2;
            var prevTwObj = $(".detail_popup_"+d1+"_"+d2);
            var circleDotBtns = $(".circle_dots li a");

            $(".detail_btns>.arrow>a").show();

            if(type == 0){
                if(d2 == 1){
                    if(d1 == 1) d1 = 3;
                    else d1 = d1-1;
                    d2 = sectionEndPointArr[(d1-1)];
                }else{
                    d2 = d2-1;
                }
            }else{
                if(d2 == sectionEndPointArr[(d1-1)]){
                    if(d1 == 3) d1 = 1;
                    else d1 = d1+1;
                    d2 = 1;
                }else{
                    d2 = d2+1;
                }
            }

            var nextTwObj = $(".detail_popup_"+d1+"_"+d2);
            nextTwObj.show();

            TweenMax.to(prevTwObj, 1, {delay:0.3, alpha:0, ease:Cubic.easeOut});
            TweenMax.to(nextTwObj, 0, {alpha:0});
            TweenMax.to(nextTwObj, 0.6, {alpha:1, ease:Cubic.easeOut});

            prevTwObj.css("z-index", 0);
            nextTwObj.css("z-index", 1);

            $self.circularMotion(d1-1);

            strokeCount = d1-1;
            selectCountObj.d1 = d1;
            selectCountObj.d2 = d2;

            TweenMax.delayedCall(0.2, function(){
                var activeIdx = 0;
                if(d1 == 2) activeIdx = 6;
                if(d1 == 3) activeIdx = 10;

                activeIdx  = activeIdx + (d2-1);

                circleDotBtns.removeClass("active");
                circleDotBtns.eq(activeIdx).addClass("active");
                $self.circleMouseInteraction(0, false);
                $self.circleMouseInteraction(activeIdx, true);
            })

            $self.arrowStateChange();
        },
        /*
        * ARROW 氩勴娂 頇滌劚頇
        * */
        arrowStateChange:function(){
            var d1 = selectCountObj.d1;
            var d2 = selectCountObj.d2;

            if(d1 == 3 && d2 == 11) {
                TweenMax.to($(".arrow>a").eq(0), 0.3, {autoAlpha:1});
                TweenMax.to($(".arrow>a").eq(1), 0.3, {autoAlpha:0});
            }else if(d1 == 1 && d2 == 1){
                TweenMax.to($(".arrow>a").eq(0), 0.3, {autoAlpha:0});
                TweenMax.to($(".arrow>a").eq(1), 0.3, {autoAlpha:1});
            }else{
                TweenMax.to($(".arrow>a").eq(0), 0.3, {autoAlpha:1});
                TweenMax.to($(".arrow>a").eq(1), 0.3, {autoAlpha:1});
            }
        }
    }

    return $self;
})();


$(function(){
    HanwhaHistory.init();
});