//Create array of images for slideshow!

var PuffMagnitude = 1.5;
var Tmia; //main Image animator
var Tmiao; //main Image animator opacity
var Tha; //Height animator
var Tlb; //Loading Bar

window.addEvent('domready', function() {
    //
    $$('.brandingLogo').each(function(item, index, array) {
        item.addEvent('click', function() {
            //alert('sdfsdf');
            Puff(item);
            ChangeImage(item);
        });
    });

    Tmia = new Fx.Tween($('brandingShowcaseMainImage'), { duration: '500' });
    Tmiao = new Fx.Tween($('brandingShowcaseMainImage'), { duration: '500' });
    Tha = new Fx.Tween($('spacer'), { duration: '500' });
    Tlb = new Fx.Tween($('brandingShowcaseLoading'), { duration: '500' });

    $$(".brandingLogo").each(function(item, index, array) {
        item.addEvent('mouseenter', function() {
            item.setStyle('opacity', 0.7);
        });

        item.addEvent('mouseleave', function() {
            item.setStyle('opacity', 1);
        });

    })

    var Element = $$('.brandingLogo')[4];

    Puff(Element);
    ChangeImage(Element);

    //Nudge newsletterSignupContainer
   // $('newsletterSignupContainer').setStyle('margin-right', '41px');
});

function Puff(d) {
    //alert(d.get('html'));

    //Clone Object
    var c = d.clone();


    //d.inject(c, "after");
    c.inject(d, "after");

    //zindex above original
    c.setStyle("z-index", "1000");

    //ImageToAnimate
    var i = c.getFirst();

    //exmapnd and fade out
    var Mi = new Fx.Morph(i, { duration: '500' });
    var Mc = new Fx.Morph(c, { duration: '500' });

    //destroy on completion
    Mi.addEvent('complete', function() {
        c.destroy();
    });

    //Start Anim
    var z = i.getSize();

    Mi.start({
        'height': [z.y, z.y * PuffMagnitude],
        'width': [z.x, z.x * PuffMagnitude],
        'opacity': [1, 0]
    });

    var Tfv = parseInt(c.getStyle('top')) - ((z.y * PuffMagnitude - z.y) / 2);
    var Lfv = parseInt(c.getStyle('left')) - ((z.x * PuffMagnitude - z.x) / 2);

    //    var Tfv = parseInt(c.getStyle('top')) * PuffGrow;
    //    var Lfv = parseInt(c.getStyle('left')) * PuffGrow;

    //alert("b: " + c.getStyle('left') + " a: " + Lfv)
    //alert("b: " + c.getStyle('top') + " a: " + Tfv)

    Mc.start({
        'top': [c.getStyle('top'), Tfv],
        'left': [c.getStyle('left'), Lfv]
    });

    //M.tween('opacity', '0');
};

function ChangeImage(item) {

    //Tmia
    //Tha
    //Tlb

    //Fade Current Image Out
    Tmiao.start('opacity', 0);

    //Animate height of image bar to 0
    Tmia.start("height", "0");
    Tha.start("height", "0");

    //Display LoadingBar
    Tlb.start("opacity", 1);
    Tlb.start('height', '5px');

    //Get image source name
    var src = item.getFirst().getProperty('src');
    src = src.replace('sml', 'lrg');
    src = src.replace('/thumb', '');

    //alert(src);
    
    //Set to load
    var myImage = new Asset.image(
        src,
        {
            oncomplete: function() {
                alert('sdfsd');
            },
            onload: function() {
                //alert('sdfgdfgdf');
                //alert('image loaded');
                //NextShowcaseSlide.periodical(TimerSpeedSelected);
                var NewImage = new Element('img', {
                    'src': src
                });
                $('brandingShowcaseMainImage').getChildren().each(function(item) {
                    item.destroy();
                });

                NewImage.inject($('brandingShowcaseMainImage'));

                var z = NewImage.getSize();

                //alert(z.y + "  -- " + z.x);


                Tmia.cancel();
                Tmiao.cancel();
                Tha.cancel();

                //Expand to height of image
                Tmiao.start('opacity', 1);
                Tmia.start('height', z.y);
                Tha.start('height', z.y);

                //Hide Loading Bar
                Tlb.start('height', '0px');
            }
        }
    );

    
}