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 bcadRunning = function() {
        Y.get('#bcad-content-shown').addClass('hide');
        Y.get('#bcad-content').addClass('hide');
        bcadFade.setAtts({ 'reverse': false });
        bcadFade.run();
    }

    var albettyRunning = function() {
        Y.get('#albetty-content').addClass('hide');
        Y.get('#albetty-content-shown').addClass('hide');
        albettyFade.setAtts({ 'reverse': false });
        albettyFade.run();
        bcadRunning();
    }

    var itmRunning = function() {
        Y.get('#itm-content').addClass('hide');
        Y.get('#itm-content-shown').addClass('hide');
        albettyFade.setAtts({ 'reverse': false });
        itmFade.run();
        albettyRunning();
    }

	var albettyWide = new Y.Anim( {
		node: '#albetty',
		duration: duration,
		to: { width: '780px' },
		from: { width: '380px' },
		easing: Y.Easing.easeNone,
        direction: 'alternate'
	});

	var itmWide = new Y.Anim( {
		node: '#itm',
		duration: duration,
		to: { width: '600px' },
		from: { width: '200px' },
		easing: Y.Easing.easeNone,
        direction: 'alternate'
	});

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

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

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

    var albettyHover = function(e) {
        var incompleteAnim = false;
        if (albettyWide.get('running')) {
            incompleteAnim = true;
            albettyWide.pause();
        }
        if (e.type == 'mouseout') {
            animState['albetty'] = 'mouseout';
            if (animState['itm'] != 'mouseover') {
                albettyWide.setAtts({ 
                    'reverse': true
                })
                albettyWide.run();
            }
        } else if (e.type == 'mouseover') {
            animState['albetty'] = 'mouseover';
            if (animState['itm'] != 'mouseout') {
                reverse = false;
                albettyWide.setAtts({ 'reverse': reverse })
                albettyWide.run();
            }
        }
    }

    var itmHover = function(e) {
        var reverse = false;
        var incompleteAnim = false;
        var albettyWidth = Y.get('#albetty').get('offsetWidth');
        if (itmWide.get('running')) {
            itmWide.pause();
        }
        if (albettyWide.get('running')) {
            incompleteAnim = true;
            albettyWide.pause();
        }
        if (e.type == 'mouseout') {
            animState['itm'] = 'mouseout';
            if (animState['albetty'] != 'mouseover') {
                albettyWide.setAtts({ 'reverse': true });
                itmWide.setAtts({ 'reverse': true });
                itmWide.run();
                albettyWide.run();
            } else if (animState['albetty'] == 'mouseover') {
                itmWide.setAtts({ 'reverse': true});
                itmWide.run();
            }
        } else if (e.type == 'mouseover') {
            animState['itm'] = 'mouseover';
            if(incompleteAnim && albettyWidth < 780) {
                albettyWide.setAtts({ 'reverse': false });
                itmWide.setAtts({ 'reverse': false });
                albettyWide.run();
                itmWide.run();
            } else if (incompleteAnim) {
                itmWide.setAtts({ 'reverse': false });
                itmWide.run();
            } else {
                albettyWide.setAtts({ 'reverse': false });
                itmWide.setAtts({ 'reverse': false });
                albettyWide.run();
                itmWide.run();
            }
        }
//        itmWide.setAtts({ 'reverse': reverse })
//        albettyWide.setAtts({
//            'reverse': reverse,
//            from: {
//                'width': function(node) { return node.get('offsetWidth'); }
//            }
//        })
//        itmWide.run();
//        albettyWide.run();
//        albettyWide.setAtts({ 'reverse': !reverse })
    }

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

    var albettyEnd = function() {
        animState['albetty'] = '';
        if(albettyWide.get('reverse')) {
            // if closed show albetty-content
            Y.get('#albetty-content').removeClass('hide');
            bcadEnd('small');
        } else {
            Y.get('#albetty-content-shown').removeClass('hide');
            bcadEnd('big');
        }
        albettyFade.setAtts({ 'reverse': true });
        albettyFade.run();
    }

    var itmEnd = function() {
        animState['itm'] = '';
        albettyWidth = Y.get('#albetty').get('offsetWidth');
        itmWidth = Y.get('#itm').get('offsetWidth');
        if(itmWidth > 200) {
            Y.get('#albetty-content').removeClass('hide');
            Y.get('#itm-content-shown').removeClass('hide');
            albettyFade.setAtts({ 'reverse': true });
            albettyFade.run();
            bcadEnd('big');
        } else if(albettyWidth > 380) {
            Y.get('#albetty-content-shown').removeClass('hide');
            Y.get('#itm-content').removeClass('hide');
            albettyFade.setAtts({ 'reverse': true });
            albettyFade.run();
            if(!albettyWide.get('running'))
                bcadEnd('big');
        } else {
            Y.get('#itm-content').removeClass('hide');
            Y.get('#albetty-content').removeClass('hide');
            bcadEnd('small');
        }
        itmFade.setAtts({ 'reverse': true });
        itmFade.run();
    }

    albettyWide.on('end', albettyEnd);
    albettyWide.on('start', albettyRunning);
    itmWide.on('end', itmEnd);
    itmWide.on('start', itmRunning);

	Y.get('#albetty').on('mouseover', albettyHover);
	Y.get('#albetty').on('mouseout', albettyHover); 
	Y.get('#itm').on('mouseover', itmHover);
	Y.get('#itm').on('mouseout', itmHover); 

    foo = albettyWide;
	}
);