/**

Draws the EY frame at any size.
Author: Dan Rempel, Tenzing Communications
Date: 2016-04-15

Requires GSAP TweenMax

**/


var tl;

/**
myWeight:Number - the width of the line of the frame in pixels
myWidth:Number - width of the desired frame in pixels measured from the outside to the outside
myHeight:Number - height of the desired frame in pixels measured from the peak to the bottom
myDuration:Number - seconds the animation will take to elapse from start to finish

Returns div element containing the EY Div Frame. It will automatically animate in.
**/
var drawEyDivFrame = function (myWeight, myWidth, myHeight, myDuration)
{
    tl = new TimelineMax();

    var div = document.createElement("div");
    div.style.position = "absolute";
    //div.style.background = "green";
    div.style.width = myWidth+"px";
    div.style.height = myHeight+"px";
    div.style.overflow = "hidden";
    div.style.left = 10+"px";
    div.style.top = 10+"px";
    
    var myColor = "#FFD400";
    var dotSpacing = Math.floor(myWeight*8/10); // EY ratio of weight to spacing
    var myX = 0;
    var myY = 0;
    var myRadians = 10 * Math.PI / 180; // EY angles up at 10 degrees
    var angleHeight = Math.tan(myRadians)*myWidth - myWeight; // height of the shoulder to top of head
    var myOrigin = "bottom left";
    var myDelay = 0;
    var myEase = Power1.easeInOut; //ease:Linear.easeNone
    
    //////// calculate the duration of each line
    var myLength = myWeight;
    myDuration = myDuration/2; // want to use half the duration for the dots.
    
    var dotsCombinedLength = (myWeight + dotSpacing) * 3;
    var myDotDuration = myLength*myDuration/dotsCombinedLength;
    var myDotDelay = dotSpacing*myDuration/dotsCombinedLength; // delay after dot is drawn

    var perimeter = (myWidth + myHeight)*2 - angleHeight - myWeight*4 -dotsCombinedLength;
    
    
    
    
    var dot1 = drawLine({color:myColor, weight:myWeight, fromX:myX,                        
        fromY:myHeight-myWeight, length:myLength, angle:0, origin:myOrigin, duration:myDotDuration}, div, tl, myDelay, myEase);
    var dot2 = drawLine({color:myColor, weight:myWeight, fromX:myX+=(dotSpacing+myWeight), 
        fromY:myHeight-myWeight, length:myLength, angle:0, origin:myOrigin, duration:myDotDuration}, div, tl, myDotDelay, myEase);
    var dot3 = drawLine({color:myColor, weight:myWeight, fromX:myX+=(dotSpacing+myWeight), 
        fromY:myHeight-myWeight, length:myLength, angle:0, origin:myOrigin, duration:myDotDuration}, div, tl, myDotDelay, myEase);
        
    //tl.addCallback( callback:reversedToDots, position:myDuration, params:[], scope:tl );
    tl.addCallback( reversedToDots, myDuration+myDotDelay, [], tl );

    myLength = myWidth-myX;
    var lineBottom = drawLine({color:myColor, weight:myWeight, fromX:myX+=(dotSpacing+myWeight), 
        fromY:myHeight-myWeight, length:myLength, angle:0, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, myDotDelay, myEase);
    myLength = myHeight-myWeight*1.2;
    var lineRight = drawLine({color:myColor, weight:myWeight, fromX:myWidth, 
        fromY:myHeight-myWeight*2, length:myLength, angle:-90, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, myDelay-=myWeight*myDuration/perimeter, myEase);
    myLength = myWidth+myWeight;
    var lineTop = drawLine({color:myColor, weight:myWeight, fromX:myWidth, 
        fromY:-myWeight, length:myLength, angle:-190, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, myDelay, myEase);
    myLength = myHeight-angleHeight-myWeight*2-dotSpacing;
    var lineLeft = drawLine({color:myColor, weight:myWeight, fromX:0, 
        fromY:angleHeight, length:myLength, angle:-270, origin:myOrigin, duration:myLength*myDuration/perimeter}, div, tl, myDelay, myEase);
    
    console.log("drawEyDivFrame total animation time: ", tl.totalDuration() );
    return div;
}

var reverseDrawEyDivFrame = function ()
{
    return tl.reverse();
}
var reversedToDots = function (myTimeLine)
{
    if( tl.reversed() )
    {
        tl.timeScale(8);
    };
}


/**
styleObj:Object - with the following properties
    color:String - CSS colour value as a string "#FFF" or "red" to define the colour of the line
    weight:Number - Pixels defining the thickness of the line
    fromX:Number - the x position in pixels where this line will start
    fromY:Number - the y position in pixels where this line will start
    length:Number - the length of the line in pixels
    angle:Number - the degrees defines the direction the line will be drawn
    origin:myOrigin - 0 = right; -90 = up
    duration:Number - seconds the drawing of this line should take
container:HTMLelement - HTML element into which you will draw this element. It should be absolute or relative positioned.
timeline:TimelineMax - timeline to which you need this line draw animation added.
myDelay:Number - seconds delay from the previous animation before this one starts
**/
var drawLine = function (styleObj, container, timeline, myDelay, myEase)
{
    var div = document.createElement("div");
    
    var myRotation = "rotate(" + styleObj.angle+"deg)";

    div.style.webkitTransformOrigin = styleObj.origin;
    div.style.MozTransformOrigin =  styleObj.origin;
    div.style.mxTransformOrigin =  styleObj.origin;
    div.style.OTransformOrigin =  styleObj.origin;
    div.style.transformOrigin =  styleObj.origin;
    
    div.style.webkitTransform = myRotation;
    div.style.MozTransform = myRotation;
    div.style.msTransform = myRotation;
    div.style.OTransform = myRotation;
    div.style.transform = myRotation;

    div.style.position = "absolute";
    div.style.left = styleObj.fromX;
    div.style.top = styleObj.fromY;
    div.style.background = styleObj.color;
    div.style.height = styleObj.weight+"px";
    div.style.left = styleObj.fromX+"px";
    div.style.top = styleObj.fromY+"px";
    
    div.style.width = "0px"; /////// needs to be 0 before animating to this width
    
    container.appendChild(div);
	timeline.to(div, styleObj.duration, {width:styleObj.length, ease:myEase, delay:myDelay});
    
    return div;
}

//drawEyDivFrame(myWeight, myWidth, myHeight, duration);
var div = drawEyDivFrame(10, 196, 193, 2);
document.body.appendChild(div);