/*
Image imgs
========
class: img.project-gallery-image
id: <image-id>

Thumbnail imgs
==========
class: project-gallery-thumbnail
id: <image-id>-thumbnail

Credit divs
==========
class: project-gallery-credit
id: <image-id>-credit

Caption divs
==========
class: project-gallery-caption
id: <image-id>-caption

 */

ProjectGallery = {};

ProjectGallery.position = {
    x:340,
    y:80
};
ProjectGallery.maximumImageHeight = 300;
ProjectGallery.creditHeight = 20;
ProjectGallery.currentThumbnailPositionX = ProjectGallery.position.x;
ProjectGallery.inTransition = true;
ProjectGallery.layoutRightMargin = 1020;

ProjectGallery.setInTransition = function(booleanValue){
    ProjectGallery.inTransition = booleanValue;
}
ProjectGallery.initialize = function(){
    var projectViewSpacer = $('project-view-spacer');
    if( projectViewSpacer ){
        ProjectGallery.position.y = projectViewSpacer.getPosition().y;
    }

    var imageArray = $$('.project-gallery-image');
    imageArray.each( ProjectGallery.prepareImage );

    var creditArray = $$('div.project-gallery-credit');
    creditArray.each( ProjectGallery.prepareCredit );

    var captionArray = $$('div.project-gallery-caption');
    captionArray.each( ProjectGallery.prepareCaption );

    ProjectGallery.currentThumbnailPositionY = ProjectGallery.position.y+ProjectGallery.maximumImageHeight+ProjectGallery.creditHeight;
    var thumbnailArray = $$('img.project-gallery-thumbnail');
    thumbnailArray.each( ProjectGallery.prepareThumbnail );


}

window.addEvent('load',ProjectGallery.initialize);

ProjectGallery.prepareImage = function( thisImage, index ){
    var imageId = thisImage.getProperty('id');
    var captionId = imageId+'-caption';
    thisImage.caption = $(captionId);
    var creditId = imageId+'-credit';
    thisImage.credit = $(creditId);
    var thumbnailId = imageId+'-thumbnail';
    thisImage.thumbnail = $(thumbnailId);
    thisImage.set('tween',{
        duration: 400
    });
    thisImage.appear = function(){
        thisImage.tween('opacity',0,1);
        //ProjectGallery.highlightElement.transitionTo(thisImage.thumbnail);
        thisImage.thumbnail.isSelected = true;
        thisImage.thumbnail.setStyle('opacity',1);
        if( thisImage.credit ){
            thisImage.credit.appear.delay( 200, thisImage.credit );
        }
    }
    thisImage.disappear = function(){
        thisImage.tween('opacity',1,0);
        thisImage.thumbnail.isSelected = false;
        if( thisImage.credit ){
            thisImage.credit.disappear();
        }
    }
    thisImage.addEvent( 'mouseover',function(){
        if( thisImage.caption ){
            thisImage.caption.appear();
        }
    })
    thisImage.addEvent( 'mouseout',function(){
        if( thisImage.caption ){
            thisImage.caption.disappear();
        }
    })
    if( index==0 ){
        ProjectGallery.currentVisibleImage = thisImage;
    }

	if( thisImage.hasClass && thisImage.hasClass('video')){
		thisImage.isLoaded = true;
		thisImage.setStyle( 'left', ProjectGallery.position.x+'px' );
		thisImage.setStyle( 'top', ProjectGallery.position.y+'px' );
		if( thisImage.getSize().y > ProjectGallery.maximumImageHeight ){
			ProjectGallery.maximumImageHeight = thisImage.getSize().y;
		}
	}else{
		var src = thisImage.getProperty('src');
		new Asset.image(
			src,{
				onload: function(){
					thisImage.isLoaded = true;
					thisImage.setStyle( 'left', ProjectGallery.position.x+'px' );
					thisImage.setStyle( 'top', ProjectGallery.position.y+'px' );
					if( index==0 ){
						//ProjectGallery.highlightElement.setTo(thisImage.thumbnail);
						thisImage.appear();
						ProjectGallery.inTransition= false;
					}
					if( thisImage.getSize().y > ProjectGallery.maximumImageHeight ){
						ProjectGallery.maximumImageHeight = thisImage.getSize().y;
					}
				}
			});
	}

//ProjectGallery.prepareHighlightElement();
}

ProjectGallery.prepareCaption = function( thisCaption, index ){
    thisCaption.appear = function(){
        thisCaption.tween('opacity',0,1);
    }
    thisCaption.disappear = function(){
        thisCaption.tween('opacity',1,0);
    }
    thisCaption.setStyle( 'left', ProjectGallery.position.x+'px' );
    thisCaption.setStyle( 'top', ProjectGallery.position.y+'px' );
}

ProjectGallery.prepareCredit = function( thisCredit, index ){
    thisCredit.appear = function(){
        thisCredit.tween('opacity',0,1);
    }
    thisCredit.disappear = function(){
        thisCredit.tween('opacity',1,0);
    }
    thisCredit.setStyle( 'left', ProjectGallery.position.x+'px' );
    thisCredit.setStyle( 'top', (ProjectGallery.position.y+ProjectGallery.maximumImageHeight+2)+'px' );
}

ProjectGallery.prepareThumbnail = function( thisThumbnail, index ){
    var thumbnailId = thisThumbnail.getProperty('id');
    thisThumbnail.set('tween',{
        duration: 200
    });
    thisThumbnail.isVideo = thisThumbnail.hasClass("video-still");
    var imageId = thumbnailId.replace('-thumbnail','');
    thisThumbnail.image = $(imageId);
    thisThumbnail.isSelected=false;
    thisThumbnail.appear = function(){
        thisThumbnail.tween('opacity',0,.85);
    }
    thisThumbnail.sharpen = function(){
        if(thisThumbnail.isSelected){
            return;
        }
        thisThumbnail.tween('opacity',.85,1);
    }
    thisThumbnail.soften = function(){
        if(thisThumbnail.isSelected){
            return;
        }
        thisThumbnail.tween('opacity',1,.85);
    }
    thisThumbnail.addEvent('mouseover',function(){
        thisThumbnail.sharpen();
    })
    thisThumbnail.addEvent('mouseout',function(){
        thisThumbnail.soften();
    })
    thisThumbnail.addEvent('click',function(){
        if( ProjectGallery.inTransition ){
            return;
        }
        thisThumbnail.sharpen();
        ProjectGallery.currentVisibleImage.disappear();
        ProjectGallery.currentVisibleImage = thisThumbnail.image;
        thisThumbnail.image.appear();
        ProjectGallery.setInTransition.delay(400,this,false);
    })
    thisThumbnail.setStyle( 'left', ProjectGallery.currentThumbnailPositionX+'px' );
    thisThumbnail.setStyle( 'top',ProjectGallery.currentThumbnailPositionY+'px' );
    ProjectGallery.currentThumbnailPositionX = ProjectGallery.currentThumbnailPositionX + thisThumbnail.getProperty('width').toInt()+3;
    if( ProjectGallery.currentThumbnailPositionX > (ProjectGallery.layoutRightMargin) ){
        ProjectGallery.currentThumbnailPositionX = ProjectGallery.position.x;
        ProjectGallery.currentThumbnailPositionY = ProjectGallery.currentThumbnailPositionY+53;
        var spacer = $('project-view-spacer');
        spacer.setStyle('height',spacer.getSize().y+52);
        thisThumbnail.setStyle( 'left', ProjectGallery.currentThumbnailPositionX+'px' );
        thisThumbnail.setStyle( 'top',ProjectGallery.currentThumbnailPositionY+'px' );
        ProjectGallery.currentThumbnailPositionX = ProjectGallery.position.x+thisThumbnail.getProperty('width').toInt()+3
    }
    var src = thisThumbnail.getProperty('src');
    new Asset.image(
        src,{
            onload: function(){
                thisThumbnail.isLoaded = true;
                thisThumbnail.appear();
            }
        });
}

ProjectGallery.prepareHighlightElement = function(){

    ProjectGallery.highlightElement = new Element('div',{
        styles:{
            border:'1px solid #464646',
            position:'absolute',
            top:-1000,
            left:300,
            height:10,
            width:20,
            'background-color':'transparent'
        },
        html:'&nbsp;'
    });
    $(document.body).adopt(ProjectGallery.highlightElement);
    ProjectGallery.highlightElement.morph = new Fx.Morph(ProjectGallery.highlightElement,{
        duration:700
    });
    ProjectGallery.highlightElement.transitionTo = function( element ){
        var elementPosition = element.getPosition();
        var elementDimension = element.getSize();
        var thisPosition = ProjectGallery.highlightElement.getPosition();
        var thisDimension = ProjectGallery.highlightElement.getSize();
        ProjectGallery.highlightElement.morph.start({
            'left':(elementPosition.x-1),
            'top':(elementPosition.y-1),
            'width':(elementDimension.x),
            'height':(elementDimension.y)
            });
    }
    ProjectGallery.highlightElement.setTo = function( element ){
        var elementPosition = element.getPosition();
        var elementDimension = element.getSize();
        ProjectGallery.highlightElement.setStyle('left',elementPosition.x-1);
        ProjectGallery.highlightElement.setStyle('top',elementPosition.y-1);
        ProjectGallery.highlightElement.setStyle('width',elementDimension.x+2);
        ProjectGallery.highlightElement.setStyle('height',elementDimension.y+2);
    }
}