//=====================================================================
// Margin Views 
// by structuredview.com 
//
// Requirements:
//		- mootools-release-1.11
//
//=====================================================================

var picData = [];

function addPic( srcURL, width, height, captionText, linkURL ){

	picData[ picData.length ] = { 'srcURL':srcURL, 'width':width, 'height':height, 'captionText':captionText, 'linkURL':linkURL };
	//var thisMarginalImage = new MarginalImage( srcURL, width, height, captionText, linkURL );
	//thisMarginalImage.create();
}

window.addEvent(
	'domready', 
	function(){
		picData.each(
  		function( pic ){
				var thisMarginalImage = new MarginalImage( pic.srcURL, pic.width, pic.height, pic.captionText, pic.linkURL );
				thisMarginalImage.create();
  		}
  	)
 	}
);

window.addEvent(
	'domready', 
	function(){
        var fadeInImages = $$('img.marginal-image');
        fadeInImages.each(
            function( thisImage ){
                var src = thisImage.getProperty('src');
                new Asset.image( 
                    src, 
                    { onload: 
                        function(){
                            var appear = new Fx.Style( thisImage.getProperty('id'),'opacity',{duration:1000} );   
                             appear.start( 0,1 ); 
                        }                                                      
                     } 
                );

            })
                
    }
);

function writeIma(){}

MarginalImage = function( srcURL, width, height, captionText, linkURL ) {

	this.srcURL = srcURL;
	this.width = width;
	this.height = height;
	this.captionText = captionText;
	var captionText = captionText;
	var linkURL = linkURL;
	
	this.create = function(){
			var index = MarginalImage.collection.length;
			var imgElement = 
				new Element('img', {
			    'styles': {
			        'position': 'absolute',
			        'top': '0px',
			        'left': '0px',
			        'visibility': 'hidden',
			        'border': '0px' },
			   	'events': {
			   			'mouseover':function(){
								var captionBox = MarginalImage.captionBoxElement;
								captionBox.setStyle( 'visibility', 'hidden' );
								captionBox.setHTML( captionText );
								var left = imgElement.getLeft();
								captionBox.setStyle( 'left', left+'px' );
								captionBox.setStyle( 'visibility', 'visible' ); 
			   			},
			   			'mouseout':function(){
								var captionBox = MarginalImage.captionBoxElement;
								captionBox.setStyle( 'visibility', 'hidden' );
			   			},
			   			'click':function(){
								window.location = linkURL;
			   			}
			   	},
			    'id': 'marginal-image-'+index,
			    'src': this.srcURL,
			    'width':this.width+'px',
			    'height':this.height+'px' });
			
			imgElement.inject(document.body);
			this.imgElement = imgElement;
			MarginalImage.add( this ); 
		}
		
}

MarginalImage.collection = [];
MarginalImage.rightEdge = 40;

MarginalImage.add = function( newMarginalImage ){
	if( ! newMarginalImage instanceof MarginalImage ){
		alert( 'object is not a MarginalImage...' );
		return;
	}
	if( !MarginalImage.captionBoxElement){
			MarginalImage.captionBoxElement = 
				new Element('span', {
			    'styles': {
			        'position': 'absolute',
			        'top': '150px',
			        'left': '0px',
			        'visibility': 'hidden',
			        'background-color':'#000000',
			        'z-index':'100',
			        'border': '0px',
			        'padding':'5px' },
			    'id': 'marginal-image-caption-box' } );		
			MarginalImage.captionBoxElement.inject(document.body);		
	}
	MarginalImage.collection[ MarginalImage.collection.length ] = newMarginalImage;
	var calculatedRightEdge = MarginalImage.rightEdge +  newMarginalImage.width;
	if( calculatedRightEdge < window.getWidth() ){
		newMarginalImage.imgElement.setStyle('left',MarginalImage.rightEdge+'px');
		newMarginalImage.imgElement.setProperty('class', 'marginal-image' );
		MarginalImage.rightEdge = calculatedRightEdge;
	}
}