var HeaderReference = new Class ({
	Implements: [Events, Options],
	
	initialize: function(headerReferenceEl, reference) {
		this.container = headerReferenceEl;
		this.el = reference;
		
		this.imageContainer = this.el.getFirst('div.reference-image');
		if (!this.imageContainer) {
			return;
		}
		
		this.imageLink = this.imageContainer.getFirst('a');
		if (!this.imageLink) {
			return;
		}
		
		this.image = this.imageLink.getFirst('img');
		if (!this.image) {
			return;
		}

		this.bigImage = new Asset.image(this.imageLink.getAttribute('href'), {
				onload: function() {
					this.bigImage.addClass('tempBigImage');
					this.bigImage.setStyles({opacity: 0, visibility: 'hidden'}),
					this.imageContainer.grab(this.bigImage);
					this.bigImage = this.imageContainer.getFirst('.tempBigImage');
				}.bind(this)
			});
		
		this.fullImage = new Asset.image(this.image.getAttribute('src'), {onload: function() {
				this.image.setAttribute('src', this.fullImage.getAttribute('src'));
			}.bind(this)});
			
		this.imageSlideFx = new Fx.Elements(this.image, {
//						duration: 20,
//						transition: Fx.Transitions.Expo.easeOut,
					    onComplete: function(){
					    }.bind(this)
					});

		this.content = this.el.getFirst('.reference-content');


		this.image.addEvent('click', function(e) {
			e.target.getParent().blur();
			if (this.content) {
				this.container.showBigImage(this.bigImage.getProperty('src'), this.bigImage, this.content);
			} else {
				this.container.showBigImage(this.bigImage.getProperty('src'), this.bigImage, null);
			}
			return false;
		}.bind(this));
			
		this.image.addEvent('mousemove', function(e){return eventSlideImage(e);}.bind(this));
		
	}
	

});
	

var HeaderReferences = new Class ({
	
	Implements: [Events, Options],
	
	initialize: function(headerReferenceEl) {
		this.container = headerReferenceEl;
		this.container.getFirst('.mood-reference-big-image').setStyles({display: 'none', opacity: 0});
		this.references = this.container.getChildren('.mood-reference');
		this.references.each(function(item, index) {
			new HeaderReference(this, item);
		}, this);
		
	},
	
	closeBigImageContent: function() {
		var hideFx = new Fx.Elements(this.container.getFirst('.mood-reference-content'), {
			duration: 500,
			transition: Fx.Transitions.Expo.easeOut,
		    onComplete: function(){
				this.container.getFirst('.mood-reference-content').setStyles({display:'none'});	
			}.bind(this)
		}).start({
		    '0': {
		        //'height': 40
		        'opacity' : 0
		    }
		});	
			
	},
	
	closeBigImage: function() {

		this.container.getFirst('.mood-reference-big-image').removeEvent('mousemove');

		this.container.getFirst('.mood-reference-content-close').setStyles({display: 'none'});
	
		this.closeBigImageContent();
	

		var hideFx = new Fx.Elements(this.container.getFirst('.mood-reference-content'), {
			duration: 300,
			transition: Fx.Transitions.Expo.easeOut,
		    onComplete: function(){
				this.container.getFirst('.mood-reference-content').setStyles({display:'none'});	
		    }.bind(this)
		}).start({
		    '0': {
		        //'height': 40
		        'opacity' : 0
		    }
		});	

		var hideFx2 = new Fx.Elements(this.container.getFirst('.mood-reference-big-image'), {
			duration: 400,
			transition: Fx.Transitions.Expo.easeOut,
		    onComplete: function(){
		    	this.container.getFirst('.mood-reference-big-image').setStyles({display:'none'});

				this.references.each(function(item) {
					this.showReference(item);
				}.bind(this));
		    }.bind(this)
		}).start({
		    '0': {
		        //'height': 40
		        'opacity' : 0
		    }
		});	
		
	},
	
	hideReference: function(reference) {
		var fadeOutFx = new Fx.Elements(reference, {
			duration: 500,
			transition: Fx.Transitions.Expo.easeOut,
		    onComplete: function(){
			}
		}).start({
				'0': {
					'opacity':0
				}
			});
	
	},

	showReference: function(reference) {
		var fadeinFx = new Fx.Elements(reference, {
			duration: 500,
			transition: Fx.Transitions.Expo.easeOut,
		    onComplete: function(){
			}
		}).start({
				'0': {
					'opacity':1
				}
			});
	
	},
	
	showBigImage: function(src, imgEl, content) {
    	if (headerObject) {
//    		headerObject.disableBottomBar(true);								    	
    	}

		this.container.getFirst('.mood-reference-big-image').setStyles({display: 'none', opacity: 0});

		this.container.getFirst('.mood-reference-big-image').setStyles({display: 'none', opacity: 0});
		
		if (content) {
			this.container.getFirst('.mood-reference-content').getFirst('.content').innerHTML = content.innerHTML;	
			this.container.getFirst('.mood-reference-content').setStyles({display:'block', opacity:0});	
			this.container.getFirst('.mood-reference-content').getFirst('.mood-reference-content-background').setStyles({opacity: 0.9});	
		} else {
			this.container.getFirst('.mood-reference-content').getFirst('.content').innerHTML = '';	
			this.container.getFirst('.mood-reference-content').setStyles({display:'none'});	
		}
		
		
		
		this.tempFullImg = imgEl;
		
		this.references.each(function(item) {
			this.hideReference(item);
		}.bind(this));
		
		this.fullImage = new Asset.image(src, {onload: function() {
				this.container.getFirst('.mood-reference-big-image').innerHTML='';
				this.container.getFirst('.mood-reference-big-image').grab(this.fullImage);
				this.bigImageWidth = this.tempFullImg.getCoordinates().width;
				this.bigImageHeight = this.tempFullImg.getCoordinates().height;
				this.oldWidth = this.container.getParent().getParent().getParent().getParent().getParent().getParent().getStyle('width'); 
				this.oldheight = this.container.getParent().getParent().getStyle('height');
				this.container.getFirst('.mood-reference-big-image').addEvent('click', this.closeBigImage.bind(this));
				this.container.getFirst('.mood-reference-content-close').addEvent('click', this.closeBigImage.bind(this));
				this.container.getFirst('.mood-reference-content').getFirst('.mood-reference-content-background').setStyles({height: 0.8 * this.tempFullImg.getCoordinates().height});
				this.container.getFirst('.mood-reference-big-image').setStyles({display: 'block'});
				this.container.getFirst('.mood-reference-content-close').setStyles({display: 'block'});

				var showFx = new Fx.Elements(this.container.getFirst('.mood-reference-big-image'), {
					duration: 1500,
					transition: Fx.Transitions.Expo.easeOut,
				    onComplete: function(){
				    	this.container.getFirst('.mood-reference-big-image').getFirst('img').addEvent('mousemove', function(e){return eventSlideImage(e);}.bind(this));
				    }.bind(this)
				}).start({
				    '0': {
				        //'height': 40
				        'opacity' : 1
				    }
				});
				if (this.container.getFirst('.mood-reference-content').getFirst('.content').innerHTML != '') {
					var showFx = new Fx.Elements(this.container.getFirst('.mood-reference-content'), {
						duration: 1500,
						transition: Fx.Transitions.Expo.easeOut,
					    onComplete: function(){
					    }.bind(this)
					}).start({
					    '0': {
					        //'height': 40
					        'opacity' : 1
					    }
					});
				}	
			}.bind(this)
		});
	}
});

window.addEvent('domready', function() {
	var header = $$('div.mood-references');
	if (header.length > 0) {
		new HeaderReferences(header[0]);
	}
});