// front

var logos = {
    canvas: {},
    ctx: {},
    colors: [
            ["rgb(41, 197, 171)", "rgb(94, 141, 152)"],
            ["rgb(58, 187, 177)", "rgb(84, 156, 164)"],
            ["rgb(78, 178, 177)", "rgb(71, 173, 174)"],
    ],    
    winWidth: 980,
    winX1: 0,
    winX2: 980,
    top: 20,
    left: 20,    
    init: function(){
        logos.canvas = document.getElementById("canvas");
        logos.ctx = logos.canvas.getContext("2d");
        if (!logos.ctx) {
            return;
        }
        logos.ctx.translate(logos.top,logos.left);        
        logos.draw12(logos.ctx, logos.colors[0][1], 1);
        logos.draw11(logos.ctx, logos.colors[0][0], 1);        
        logos.draw22(logos.ctx, logos.colors[1][1], 1);
        logos.draw21(logos.ctx, logos.colors[1][0], 1);        
        logos.draw32(logos.ctx, logos.colors[2][1], 1);
        logos.draw31(logos.ctx, logos.colors[2][0], 1);        
        
        // windows width
        logos.winWidth = $('#logo').outerWidth();
        logos.winX1 = $('#logo').offset().left;
        logos.winX2 = logos.winX1 + logos.winWidth;
        
        logos.mouseMove();
    },
    mouseMove: function(){
        $('#container').mousemove(function(eventObject){
            var pageX = eventObject.pageX > logos.winX1 ? eventObject.pageX : logos.winX1;
            logos.flipping(logos.calcFactor(pageX));                
        });         
    },
    calcFactor: function(curX){
        return (1 - (Math.abs(curX - logos.winX1)/logos.winWidth)).toFixed(2);
    },
    flipping: function(zoom){
        var shiftVal = 82.5/10;
        var shift = 0;

        if (!logos.ctx) {            
            return;
        }
        if(zoom < 0) zoom = 0;
        if(zoom > 1) zoom = 1;
        if(zoom != 1 || zoom != -1){
            shift = shiftVal*(10-(10*zoom));            
        } 

        logos.ctx.clearRect(-100, -100, 1000, 1000);

        if(zoom != 0){          
            //            
            logos.ctx.setTransform(zoom,0,0,1,shift,0);
            logos.ctx.translate(logos.top,logos.left);
            logos.draw12(logos.ctx, logos.colors[0][1], zoom);              

            logos.ctx.setTransform(zoom,0,0,1,shift,0);
            logos.ctx.translate(logos.top,logos.left);
            logos.draw11(logos.ctx, logos.colors[0][0], zoom);             
            //
            logos.ctx.setTransform(zoom,0,0,1,shift,0);
            logos.ctx.translate(logos.top,logos.left);
            logos.draw22(logos.ctx, logos.colors[1][1], zoom);              

            logos.ctx.setTransform(zoom,0,0,1,shift,0);
            logos.ctx.translate(logos.top,logos.left);
            logos.draw21(logos.ctx, logos.colors[1][0], zoom);             
            //
            logos.ctx.setTransform(zoom,0,0,1,shift,0);
            logos.ctx.translate(logos.top,logos.left);
            logos.draw32(logos.ctx, logos.colors[2][1], zoom);              

            logos.ctx.setTransform(zoom,0,0,1,shift,0);
            logos.ctx.translate(logos.top,logos.left);
            logos.draw31(logos.ctx, logos.colors[2][0], zoom);             
        }
    },
    shadow: function(ctx, offset, orient){
        ctx.shadowColor = 'rgba(140, 140, 140, ' + offset*0.5 + ')';
        var offsetX = offset*0.5;
        ctx.shadowOffsetX = orient == 'left' ? -offsetX : offsetX;
        ctx.shadowOffsetY = 0;
        ctx.shadowBlur = offset*8;          
    },
    draw11: function (ctx, color11, zoom) {
        logos.shadow(ctx, zoom, 'left');
        ctx.beginPath();
        ctx.moveTo(62.5, 3.9);
        ctx.bezierCurveTo(62.5, 3.9, 53.3, 3.2, 39.7, 8.7);
        ctx.bezierCurveTo(33.0, 11.6, 7.1, -4.1, 2.1, 1.0);
        ctx.bezierCurveTo(-4.8, 7.9, 7.8, 31.0, 7.1, 45.9);
        ctx.bezierCurveTo(5.6, 64.1, 1.2, 111.5, 62.5, 119.4);
        ctx.bezierCurveTo(62.5, 104.0, 62.5, 3.9, 62.5, 3.9);
        ctx.closePath();
        ctx.fillStyle = color11;
        ctx.fill();        
    },
    draw12: function (ctx, color12, zoom) {
        logos.shadow(ctx, zoom);
        ctx.beginPath();
        ctx.moveTo(123.0, 1.0);
        ctx.bezierCurveTo(117.9, -4.1, 92.0, 11.6, 85.3, 8.7);
        ctx.bezierCurveTo(71.7, 3.2, 62.5, 3.9, 62.5, 3.9);
        ctx.bezierCurveTo(62.5, 3.9, 62.5, 104.0, 62.5, 119.4);
        ctx.bezierCurveTo(123.8, 111.5, 119.4, 64.1, 117.9, 45.9);
        ctx.bezierCurveTo(117.2, 31.0, 129.8, 7.9, 123.0, 1.0);
        ctx.closePath();
        ctx.fillStyle = color12;
        ctx.fill();  
    },
    draw21: function (ctx, color21, zoom){
        logos.shadow(ctx, zoom, 'left');
        ctx.beginPath();
        ctx.moveTo(62.5, 3.9);
        ctx.bezierCurveTo(62.5, 3.9, 56.1, 3.2, 46.5, 8.7);
        ctx.bezierCurveTo(41.8, 11.6, 23.7, -4.1, 20.2, 1.0);
        ctx.bezierCurveTo(15.4, 7.9, 24.2, 31.0, 23.7, 45.9);
        ctx.bezierCurveTo(22.7, 64.1, 19.6, 111.5, 62.5, 119.4);
        ctx.bezierCurveTo(62.6, 104.0, 62.5, 3.9, 62.5, 3.9);
        ctx.closePath();
        ctx.fillStyle = color21;
        ctx.fill();        
    },
    draw22: function (ctx, color22, zoom){
        logos.shadow(ctx, zoom);
        ctx.beginPath();
        ctx.moveTo(104.8, 1.0);
        ctx.bezierCurveTo(101.3, -4.1, 83.2, 11.6, 78.5, 8.7);
        ctx.bezierCurveTo(69.0, 3.2, 62.5, 3.9, 62.5, 3.9);
        ctx.bezierCurveTo(62.5, 3.9, 62.5, 104.0, 62.5, 119.4);
        ctx.bezierCurveTo(105.4, 111.5, 102.4, 64.1, 101.3, 45.9);
        ctx.bezierCurveTo(100.8, 31.0, 109.7, 7.9, 104.8, 1.0);
        ctx.closePath();
        ctx.fillStyle = color22;
        ctx.fill();      
    },
    draw31: function (ctx, color31, zoom){
        logos.shadow(ctx, zoom, 'left');
        ctx.beginPath();
        ctx.moveTo(62.5, 3.9);
        ctx.bezierCurveTo(62.5, 3.9, 58.8, 3.2, 53.4, 8.7);
        ctx.bezierCurveTo(50.7, 11.6, 40.3, -4.1, 38.3, 1.0);
        ctx.bezierCurveTo(35.5, 7.9, 40.6, 31.0, 40.3, 45.9);
        ctx.bezierCurveTo(39.7, 64.1, 37.9, 111.5, 62.5, 119.4);
        ctx.bezierCurveTo(62.5, 104.0, 62.5, 3.9, 62.5, 3.9);
        ctx.closePath();
        ctx.fillStyle = color31;
        ctx.fill();          
    },
    draw32: function (ctx, color32, zoom){
        logos.shadow(ctx, zoom);
        ctx.beginPath();
        ctx.moveTo(86.7, 1.0);
        ctx.bezierCurveTo(84.7, -4.1, 74.3, 11.6, 71.7, 8.7);
        ctx.bezierCurveTo(66.2, 3.2, 62.5, 3.9, 62.5, 3.9);
        ctx.bezierCurveTo(62.5, 3.9, 62.5, 104.0, 62.5, 119.4);
        ctx.bezierCurveTo(87.1, 111.5, 85.3, 64.1, 84.7, 45.9);
        ctx.bezierCurveTo(84.4, 31.0, 89.5, 7.9, 86.7, 1.0);
        ctx.closePath();
        ctx.fillStyle = color32;
        ctx.fill();           
    }
}

var about = {
    width: 600,
    height: 570,
    widthSm: 182,
    heightSm: 17,
    heightCont: 75,
    info: function(){
        $(".arrow1").toggle(function(){
              $("#who-are-you .where").fadeOut(100);
              $(".arrow1").removeClass('up').addClass('down');
              $("#who-are-you").animate({width: about.width + "px", height: about.height + "px"}, 600);
        },
        function(){
              $(".arrow1").removeClass('down').addClass('up');
              $("#who-are-you").animate({width: about.widthSm + "px", height: about.heightSm + "px"}, 600, function(){
                  $("#who-are-you .where").fadeIn(100);
              });
        });     
        $('#who-are-you .where').click(function(){
            $('.arrow1').click();
        });
    },
    contacts: function(){
        $("#email").text('mbox@creotika.ru').attr("href", "mailto:mbox@creotika.ru");        
        $("#fb-link").attr("href", "http://www.facebook.com/k0t0vsky");        
        $("#habr").attr("href", "http://habrahabr.ru/users/k0t0vsky/");        
        $("#skype").attr("href", "skype:sun_cat2000"); 
        
        $('.arrow2').toggle(
        function(){
            $("#contacts").animate({height: about.heightCont + "px"}, 300);
            $(this).removeClass('up').addClass('down');
        },
        function(){
            $("#contacts").animate({height: about.heightSm + "px"}, 300);
            $(this).removeClass('down').addClass('up');
        }
        );
    }
}

// ready
$(function() { 
    about.info();
    about.contacts();
    /* canvas logos */
    logos.init();
});