// JavaScript Document

$(function() {
    $("#box1 a").hover( function playAnimation(){
        // .then(関数名)で関数を繋げる
        firstAction()
            .then(scoundAction)
            .then(thirdAction)
    },function() {
     $('#box1_topLeft,#box1_bottomRight').css('height', '0%');
     $('#box1_bottomLeft,#box1_topRight').css('width', '0%');
     $('#box1 a').css('outline', '1px solid #4d4d4d');
  });

    function firstAction(){
        // Deferredオブジェクトを生成
        var d = new $.Deferred;
        $('#box1 a').velocity({outline : "none"}, 10, function(){
            // 状態を実行可能にする
            d.resolve();
        });
        // Promiseオブジェクトを返す
        return d.promise();
    }

    function scoundAction(){
        var d = new $.Deferred;
        $('#box1_topLeft,#box1_bottomRight').velocity({height : "100%"}, 200, 'ease-in', function(){
            d.resolve();
        });
        return d.promise();
    }

    function thirdAction(){
        var d = new $.Deferred;
        $('#box1_bottomLeft,#box1_topRight').velocity({width : "100%"}, 200 , 'ease-out', function(){
            d.resolve();
        });
        return d.promise();
    }

    // 実行
    // playAnimation();
});



$(function() {
    $("#box2 a").hover( function playAnimation2(){
        // .then(関数名)で関数を繋げる
        firstAction()
            .then(scoundAction)
            .then(thirdAction)
    },function() {
     $('#box2_topLeft,#box2_bottomRight').css('height', '0%');
     $('#box2_bottomLeft,#box2_topRight').css('width', '0%');
     $('#box2 a').css('outline', '1px solid #4d4d4d');
  });

    function firstAction(){
        // Deferredオブジェクトを生成
        var d = new $.Deferred;
        $('#box2 a').velocity({outline : "none"}, 10, function(){
            // 状態を実行可能にする
            d.resolve();
        });
        // Promiseオブジェクトを返す
        return d.promise();
    }

    function scoundAction(){
        var d = new $.Deferred;
        $('#box2_topLeft,#box2_bottomRight').velocity({height : "100%"}, 200, 'ease-in', function(){
            d.resolve();
        });
        return d.promise();
    }

    function thirdAction(){
        var d = new $.Deferred;
        $('#box2_bottomLeft,#box2_topRight').velocity({width : "100%"}, 200 , 'ease-out', function(){
            d.resolve();
        });
        return d.promise();
    }

    // 実行
    // playAnimation2();
});


$(function() {
    $("#box3 a").hover( function playAnimation3(){
        // .then(関数名)で関数を繋げる
        firstAction()
            .then(scoundAction)
            .then(thirdAction)
    },function() {
     $('#box3_topLeft,#box3_bottomRight').css('height', '0%');
     $('#box3_bottomLeft,#box3_topRight').css('width', '0%');
     $('#box3 a').css('outline', '1px solid #4d4d4d');
  });

    function firstAction(){
        // Deferredオブジェクトを生成
        var d = new $.Deferred;
        $('#box3 a').velocity({outline : "none"}, 10, function(){
            // 状態を実行可能にする
            d.resolve();
        });
        // Promiseオブジェクトを返す
        return d.promise();
    }

    function scoundAction(){
        var d = new $.Deferred;
        $('#box3_topLeft,#box3_bottomRight').velocity({height : "100%"}, 200, 'ease-in', function(){
            d.resolve();
        });
        return d.promise();
    }

    function thirdAction(){
        var d = new $.Deferred;
        $('#box3_bottomLeft,#box3_topRight').velocity({width : "100%"}, 200 , 'ease-out', function(){
            d.resolve();
        });
        return d.promise();
    }

    // 実行
    // playAnimation3();
});