var duration = .125;
YUI().use('node', 'anim', function(Y) 
    {

    // helper to keep track of events
    var animState = new Array();

    /* ??Running functions fire when related onStart event fires */
    var box1Running = function() {
        Y.get('#box1-content-shown').addClass('hide');
        Y.get('#box1-content').addClass('hide');
        box1Fade.setAtts({ 'reverse': false });
        box1Fade.run();
    }

    var box2Running = function() {
        Y.get('#box2-content').addClass('hide');
        Y.get('#box2-content-shown').addClass('hide');
        box2Fade.setAtts({ 'reverse': false });
        box2Fade.run();
        box1Running();
    }

    var box3Running = function() {
        Y.get('#box3-content').addClass('hide');
        Y.get('#box3-content-shown').addClass('hide');
        box2Fade.setAtts({ 'reverse': false });
        box3Fade.run();
        box2Running();
    }

    var box2Wide = new Y.Anim( {
        node: '#box2',
        duration: duration,
        to: { width: '625px' },
        from: { width: '370px' },
        easing: Y.Easing.easeNone,
        direction: 'alternate'
    });

    var box3Wide = new Y.Anim( {
        node: '#box3',
        duration: duration,
        to: { width: '450px' },
        from: { width: '195px' },
        easing: Y.Easing.easeNone,
        direction: 'alternate'
    });

    var box1Fade = new Y.Anim( {
        node: '#box1-text',
        duration: 0.1,
        to: { opacity: 0 },
        from: { opacity: 1 },
        reverse: false
    });

    var box2Fade = new Y.Anim( {
        node: '#box2-text',
        duration: 0.1,
        to: { opacity: 0 },
        from: { opacity: 1 },
        reverse: false
    });

    var box3Fade = new Y.Anim( {
        node: '#box3-text',
        duration: 0.1,
        to: { opacity: 0 },
        from: { opacity: 1 },
        reverse: false
    });

    var box2Hover = function(e) {
        var incompleteAnim = false;
        if (box2Wide.get('running')) {
            incompleteAnim = true;
            box2Wide.pause();
        }
        if (e.type == 'mouseout') {
            animState['box2'] = 'mouseout';
            if (animState['box3'] != 'mouseover') {
                box2Wide.setAtts({ 
                    'reverse': true
                })
                box2Wide.run();
            }
        } else if (e.type == 'mouseover') {
            animState['box2'] = 'mouseover';
            if (animState['box3'] != 'mouseout') {
                reverse = false;
                box2Wide.setAtts({ 'reverse': reverse })
                box2Wide.run();
            }
        }
    }

    var box3Hover = function(e) {
        var reverse = false;
        var incompleteAnim = false;
        var box2Width = Y.get('#box2').get('offsetWidth');
        if (box3Wide.get('running')) {
            box3Wide.pause();
        }
        if (box2Wide.get('running')) {
            incompleteAnim = true;
            box2Wide.pause();
        }
        if (e.type == 'mouseout') {
            animState['box3'] = 'mouseout';
            if (animState['box2'] != 'mouseover') {
                box2Wide.setAtts({ 'reverse': true });
                box3Wide.setAtts({ 'reverse': true });
                box3Wide.run();
                box2Wide.run();
            } else if (animState['box2'] == 'mouseover') {
                box3Wide.setAtts({ 'reverse': true});
                box3Wide.run();
            }
        } else if (e.type == 'mouseover') {
            animState['box3'] = 'mouseover';
            if(incompleteAnim && box2Width < 780) {
                box2Wide.setAtts({ 'reverse': false });
                box3Wide.setAtts({ 'reverse': false });
                box2Wide.run();
                box3Wide.run();
            } else if (incompleteAnim) {
                box3Wide.setAtts({ 'reverse': false });
                box3Wide.run();
            } else {
                box2Wide.setAtts({ 'reverse': false });
                box3Wide.setAtts({ 'reverse': false });
                box2Wide.run();
                box3Wide.run();
            }
        }
    }

    /* ??End functions fire when the related animation ends */
    function box1End (size) {
        if(size == 'big')
            Y.get('#box1-content').removeClass('hide');
        else
            Y.get('#box1-content-shown').removeClass('hide');
        box1Fade.setAtts({ 'reverse': true });
        box1Fade.run();
    }

    var box2End = function() {
        animState['box2'] = '';
        if(box2Wide.get('reverse')) {
            // if closed show box2-content
            Y.get('#box2-content').removeClass('hide');
            box1End('small');
        } else {
            Y.get('#box2-content-shown').removeClass('hide');
            box1End('big');
        }
        box2Fade.setAtts({ 'reverse': true });
        box2Fade.run();
    }

    var box3End = function() {
        animState['box3'] = '';
        box2Width = Y.get('#box2').get('offsetWidth');
        box3Width = Y.get('#box3').get('offsetWidth');
        if(box3Width > 195) {
            Y.get('#box2-content').removeClass('hide');
            Y.get('#box3-content-shown').removeClass('hide');
            box2Fade.setAtts({ 'reverse': true });
            box2Fade.run();
            box1End('big');
        } else if(box2Width > 350) {
            Y.get('#box2-content-shown').removeClass('hide');
            Y.get('#box3-content').removeClass('hide');
            box2Fade.setAtts({ 'reverse': true });
            box2Fade.run();
            if(!box2Wide.get('running'))
                box1End('big');
        } else {
            Y.get('#box3-content').removeClass('hide');
            Y.get('#box2-content').removeClass('hide');
            box1End('small');
        }
        box3Fade.setAtts({ 'reverse': true });
        box3Fade.run();
    }

    box2Wide.on('end', box2End);
    box2Wide.on('start', box2Running);
    box3Wide.on('end', box3End);
    box3Wide.on('start', box3Running);

    Y.get('#box2').on('mouseover', box2Hover);
    Y.get('#box2').on('mouseout', box2Hover); 
    Y.get('#box3').on('mouseover', box3Hover);
    Y.get('#box3').on('mouseout', box3Hover); 

    foo = box2Wide;
    }
);