var cadreBandeau;
var slider = null;
var refBandeau = null;
var currentBandeau = null;
var commentsSlider = null;
var bandeauLength = 0;
var imgDetailShown = 0;
var url = '/bandeau.php';
var commentsDivLenght = 0;



function addCommentsShowHideEvent(obj){
	//obj.setProperty('href', 'javascript:void(0)');
	obj.addEvent('click', function(e) {
		e = new Event(e).stop();
		commentsSlider.toggle();
		
	});
	

}
	
	
function ajaxGetBandeauImages(){
	
	var request = new Json.Remote(url, {
		onComplete: function(jsonObj) {
			populateBandeau(jsonObj.images);
			//hereWeGoBaby();
			slider.setHTML('');
			refBandeau.inject(slider);
			myTimer = setTimeout(bandeauTransition, 10000);
			bandeauShow();
		}
	}).send();
}

function bandeauShow(){
	
	slider.effect('width', {duration: 5000, transition: Fx.Transitions.Cubic.easeOut, 
			onComplete: function(e){
			}
		
		
		}).start(bandeauLength);
	
}


function bandeauTransition(){
		slider.effect('width', {duration: 2000, transition: Fx.Transitions.Cubic.easeOut, 
				onComplete: function(e){
					
					$('bandeau').remove();
					//url = '/bandeau.php?action=n';
					createBandeau();
					ajaxGetBandeauImages();
					
				}
			
			
			}).start('0');
	
	
}


function fireTitle(id){
	if($(id)){
		$(id).effect('opacity', {duration: 1000, transition: Fx.Transitions.Cubic.easeOut, 
			onComplete: function(e){
				$(id).remove();
				
			}
		
		
		}).start('0');
	}
	
}

function createBandeau(){
	refBandeau = new Element('ul');
	refBandeau.setProperty('id', 'bandeau');
	refBandeau.setStyle('left', '0px');
}


function populateBandeau(images){
			var counter = 0;
			
			bandeauLength = 0;
			
			images.each(function(image) {
				var title = image.name;
				var url = image.url;
				var src = image.src;
				
				bandeauLength += image.width.toInt();
				var divImg = new Element('li');
				
				var img = new Element('img');
				
				
				img.inject(divImg);
				divImg.inject(refBandeau);
				preLoad('http://pblog.firewakz.net/thumbnails/thumb_'+src);

				img.setProperty('src', 'http://pblog.firewakz.net/thumbnails/thumb_'+src);
				img.setProperty('alt', title);
				
				divImg.setStyle('display', 'block');

				if(image.height.toInt() > 86){
					divImg.setStyle('height', 86);
					img.setStyle('height', 86);
					//divImg.setStyle('height', 86);
				}else{
					divImg.setStyle('height', image.height.toInt());
					img.setStyle('height', image.height.toInt());
				}
				divImg.setStyle('float', 'left');
				img.addEvent('click', function(e) {
					window.location = '/photos/'+url;
				});
				
				img.addEvent('mouseover', function(e) {
					
					e = new Event(e).stop();
					
					
					var title = new Element('div');
					var tileStr = this.getProperty('alt');
					var titleId = 'titleImg_'+Math.floor(Math.random()*1000);
					title.setProperty('id', titleId);
					
					if(tileStr.length > 0){
						tileStr = tileStr.substr(0,15)+'...';
					}
					var newHeight = Math.floor(this.getStyle('height').toInt()*1.1);

					title.setHTML(tileStr);
					title.setStyle('marginTop', 7);
					title.setStyle('backgroundColor','#222222');
					title.setStyle('opacity', '0');
					title.setStyle('width', this.getStyle('width'));
					title.setStyle('height', '20px');
					title.setStyle('color', '#FFF');
					title.setStyle('display', 'block');

					this.getParent().effect('height', {duration: 500, transition: Fx.Transitions.Cubic.easeOut}).start(newHeight);
					this.effect('height', {duration: 500, transition: Fx.Transitions.Cubic.easeOut}).start(newHeight);
					title.effect('opacity', {duration: 1000, transition: Fx.Transitions.Cubic.easeOut}).start('0.6');
					title.inject(this.getParent());

					var arg = 'fireTitle(\''+titleId+'\')';
					myTimer = setTimeout(arg, 1000);
					preLoad('http://pblog.firewakz.net/images/'+src);
				});
				
				img.addEvent('mouseout', function(e) {
					
					e = new Event(e).stop();
					
					var newHeight;

					
					if(image.height.toInt() > 86){
						newHeight = 86;
					}else{
						newHeight = image.height.toInt();
					}
					this.effect('height', {duration: 500, transition: Fx.Transitions.Cubic.easeOut}).start(newHeight);
					this.getParent().effect('height', {duration: 500, transition: Fx.Transitions.Cubic.easeOut}).start(newHeight);

				});
				
				
				
			
			});
		
		bandeauLength += 20;

		refBandeau.setStyle('width', bandeauLength);
		
	}
	
	function addEventContactForm(){
		if($('frmContact')){
			 
			 $('frmContact').setProperty("action", "post_contact.php");
			$('frmContact').addEvent('submit', function(e) {
				/**
				 * Prevent the submit event
				 */
				new Event(e).stop();
			 
				/**
				 * This empties the log and shows the spinning indicator
				 */
				var log = document.createElement('div');
				log.addClass('ajaxLoading');
				log.inject($('frmContact'),'before');
				//var log = $('msgOnsending').empty().addClass('ajaxLoading');
				var img = document.createElement('img');
				img.id = "imgLoading";
				img.src="/images/loading.gif";
				img.inject(log);
				
				/**
				 * send takes care of encoding and returns the Ajax instance.
				 * onComplete removes the spinner from the log.
				 */
				this.send({
					update: $('msgContactSent'),
					onComplete: function() {
						//log.removeClass('ajaxLoading');
						
						$('imgLoading').remove();
						log.remove();
					}
				});
			});
		}
	}
	
	
	function preLoad(src){
		var image1 = new Image();
		image1.src = src;
	}
	
	window.addEvent('domready', function(){
			if(!window.ie6){
				cadreBandeau = $('cadre_bandeau');
				slider = $('slider');
				createBandeau();
				ajaxGetBandeauImages();
				if($('commentsContainer')){
					
					commentsSlider = new Fx.Slide('commentsContainer', {duration: 500});
					addCommentsShowHideEvent($('commentsBtn'));
					commentsSlider.hide();
					//console.debug('Height Comments: '+commentsDivLenght);
				}
				new SmoothScroll();
				addEventContactForm();
			}
			
			
		if($('you_are')){
			document.getElementById('you_are').value='ahuman';
		}
	});