//=====================================================================
// Margin Views
// by structuredview.com
//
// Requirements:
//		- mootools-release-1.11
//
//=====================================================================

// Position Marginal Images
MarginViews = {};

MarginViews.initialize = function(){
    var marginalImageArray = $$('a.marginal-image');
    var rightEdge = 340;
    marginalImageArray.each(
        function( thisImage ){
            var calculatedRightEdge = rightEdge +  thisImage.getSize().x;
            var id = thisImage.getProperty( 'id' );
            if( calculatedRightEdge < window.getWidth() ){
                // Position
                thisImage.setStyle( 'left', rightEdge+'px' );
                thisImage.setStyle( 'top', '80px' );
                $( 'caption-'+id ).setStyle( 'left', rightEdge+'px' );
                $( 'caption-'+id ).setStyle( 'top', '230px' );
                rightEdge = calculatedRightEdge;

                // Caption Over
                thisImage.addEvent(
                    'mouseover',function(){
                        $( 'caption-'+id ).setStyle( 'visibility', 'visible' );
                    });

                // Caption Out
                thisImage.addEvent('mouseout',
                    function(){
                        $( 'caption-'+id ).setStyle( 'visibility', 'hidden' );
                    });
            }
        });
}

window.addEvent('domready', MarginViews.initialize);

// Fade In When Loaded
window.addEvent(
    'domready',
    function(){
        var marginalImageArray = $$('a.marginal-image');
        marginalImageArray.each(
            function( thisImage ){
                if( 	thisImage.getPosition().x > 0 ){
                    var src = thisImage.getFirst().getProperty('src');
                    new Asset.image(
                        src, {
                            onload:
                            function(){
                                thisImage.set('tween', {
                                    duration: 1000
                                });
                                thisImage.tween( 'opacity',0,1 );
                            }
                        }
                        );
                }
            }
            )
    }
    )



