/*$(window).bind("load",function() {
});*/

$(document).ready(function() {
	/* ----  var a changer chaque semaine! -------------------------------------------------- */
		var week = 5;
		/* ---- array de semaine ---------------------------------------------------------------- */ 
		var arrayWeek = new Array("Semaine 1","Semaine 2","Semaine 3","Semaine 4","Semaine 5");
		$("h1#week").html(arrayWeek[week-1]);
		var activeWeek = arrayWeek[week-1];
		Cufon.replace('h1', { fontFamily: 'Helvetica Neue' });
		
		
		var testArray = new Array();
		/* ------ contenu départ ---------------------------------------------------------------- */
		$.ajax({ type: "GET", url: "assets/xml/users.xml", dataType: "xml", success: function(xml){
			$(xml).find("user").each(function(i) {
				var userName = $(this).find("name").text();
				var userID = $(this).attr("id");
				var moustacheSrc = $(this).find("mustache").text();
				var moustacheName = $(this).find("mustache").attr("name");
				var userPicture = $(this).find("pictures").find("picture[weekid='"+week+"']").find("path").text();
				var lienFacebook = ''; //$(this).find("pictures").find("picture[weekid='"+week+"']").find("fblink").text();
				var userNumber = userID;
				var overlayData = "";
				var overlayNumber = $(this).find("pictures").find("picture[weekid='"+week+"']").attr("weekid");
				
				var mydata = BuildHTML(userName,userID,userPicture,lienFacebook,moustacheSrc,moustacheName,userNumber,overlayNumber);
				$("<div id='user"+(userID)+"' class='user'></div>").html(mydata).appendTo("#left_column #user_list");
				
				$(this).find("pictures").find("picture").each(function(i) {
					var userThumb = $(this).find("thumbnail").text();
					var userOverlayPicture = $(this).find("overlay").text();
					var overlayNumberWeek = $(this).attr("weekid");
					var overlayWeek = arrayWeek[overlayNumberWeek-1];
					var lienFacebookOverlay = $(this).find("fblink").text();
					var overlayData = buildOverlay(userName,moustacheSrc,userOverlayPicture,lienFacebookOverlay,overlayWeek);
					if((i+1) != week) {
						$("<div id='user_"+userNumber+"_userOverlay_"+(i+1)+"' class='simple_overlay'></div>").html(overlayData).appendTo("body");
						$("#user"+userNumber+" .thumbnails_ctn").append('<div class="week_thumbnail"><a name="'+overlayWeek+'" href="#" rel="#user_'+userNumber+'_userOverlay_'+(i+1)+'"><img class="week'+(i+1)+'_Thumbnail current_week_Thumbnail" src="'+userThumb+'" alt="" /></a></div>');
					}
					else {
						$("<div id='user_"+userNumber+"_userOverlay_"+(i+1)+"' class='simple_overlay'></div>").html(overlayData).appendTo("body");
					}
				});
			});
			Cufon.replace('.simple_overlay .overlay_top .semaine', { fontFamily: 'Helvetica Neue' });
			Cufon.replace('.name', { fontFamily: 'Helvetica Neue LT Std' });
			
			$.each($('.week_thumbnail a'), function() {
				if($("img",this).attr("src") != "assets/images/emptyThumbnail.png" && $("img",this).attr("src") != "assets/images/thumbsNoPic.gif") {
					$(this).qtip({
					   api: {
						  beforeShow: function(){
							  thisMovie("backgroundFlash").ajaxHandle("start");
						  },
						  onHide: function(){
							  thisMovie("backgroundFlash").ajaxHandle("end");
						  }
					   },
					   content: {
						   text: $(this).attr("name")
					   },
					   position: {
						  corner: {
							 target: 'topMiddle',
							 tooltip: 'bottomMiddle'
						  }
					   },
					   show: {
						when: { event: 'mouseover' },
						effect: { length: 0 },
					   	delay: 0
						},
					  hide: {
						when: { event: 'mouseout' },
						effect: { length: 0 },
					   	delay: 0
						},
					   style: { 
						  padding: 5,
						  background: '#000',
						  color: '#FFF',
						  textAlign: 'center',
						  'font-family': 'Arial',
						  'font-size': 10,
						  border: {
							 width: 1,
							 radius: 2,
							 color: '#FFF'
						  },
						  tip: {
							 corner: 'bottomMiddle',
							 size: {
								x: 10,
								y : 3 
							 }
						  }
					   }
					});
					$(this,"[rel]").overlay({ 
						speed: 500,
						top: '15%',
						expose: { 
							color: '#000',
							loadSpeed: 0,
							closeSpeed: 0,
							opacity: 0.8,
							onClose: function(event) { 
								thisMovie("backgroundFlash").ajaxHandle("end");
							} 
						}
					});
					$(this).click(
					function(event){
						event.preventDefault();
						thisMovie("backgroundFlash").ajaxHandle("end");
						thisMovie("backgroundFlash").ajaxHandle("start");
					});
				}
				else {
					$(this).css("cursor","default");
					$(this).click(
					function(event){
						event.preventDefault();
					});
				}
			});
			
			$(".pictures_ctn a.picture").overlay({ 
				speed: 500,
				top: '15%',
				expose: { 
					color: '#000',
					loadSpeed: 0,
					closeSpeed: 0,
					opacity: 0.8,
					onClose: function(event) { 
						thisMovie("backgroundFlash").ajaxHandle("end");
					} 
				}
			});
			
			$(".pictures_ctn a.picture").click(
			function(event){
				event.preventDefault();
				thisMovie("backgroundFlash").ajaxHandle("start");
			});
			
			$.each($('img.mustache_type'), function() {
				$(this).qtip({
				  api: {
					 beforeShow: function(){
						 thisMovie("backgroundFlash").ajaxHandle("start");
					 },
					 onHide: function(){
						 thisMovie("backgroundFlash").ajaxHandle("end");
					 }
				  },
				  content: {
					   text: "Style : "+$(this).attr("name")
				   },
				   position: {
					  corner: {
						 target: 'topMiddle',
						 tooltip: 'bottomMiddle'
					  }
				   },
				   show: {
					  when: { event: 'mouseover' },
					  effect: { length: 0 },
					  delay: 0
					  },
					hide: {
					  when: { event: 'mouseout' },
					  effect: { length: 0 },
					  delay: 0
					  },
				   style: { 
					  padding: 5,
					  background: '#000',
					  color: '#FFF',
					  textAlign: 'center',
					  'font-family': 'Arial',
					  'font-size': 10,
					  border: {
						 width: 1,
						 radius: 2,
						 color: '#FFF'
					  },
					  tip: {
						 corner: 'bottomMiddle',
						 size: {
							x: 10,
							y : 3 
						 }
					  }
				   }
				});
			});
			
		}});
});

/*--------------- Function qui trouve le permet de trouver le movie -----------------------------*/
function thisMovie(movieName) {
	if (navigator.appName.indexOf("Microsoft") != -1) {
	   return window[movieName];
	} else {
	   return document[movieName];
	}
}

function BuildHTML(userName,userID,userPicture,lienFacebook,moustacheSrc,moustacheName,userNumber,overlayNumber){
	 
	var output = '';
	output += '<div class="user_heading">';
	output += '<p class="name">'+userName+'</p>';
    //output += '<img name="'+moustacheName+'" class="mustache_type" src="'+moustacheSrc+'"/>';
	if(lienFacebook != "#") {
    output += '<div class="fb_comments">';
    /*output += '<a target="_blank" href="'+lienFacebook+'">';
    output += '<p>Laisser un commentaire</p>';
    output += '<img src="assets/images/fbThumb.png"/>';
    output += '</a>';*/
    output += '</div>';
	}
	output += '</div>';
	output += '<div class="pictures_ctn">';
	output += '<a class="picture" href="#" rel="#user_'+userNumber+'_userOverlay_'+overlayNumber+'"><img class="current_week" src="'+userPicture+'" alt="" /></a>';
	output += '<div class="thumbnails_ctn"></div>';
	output += '</div>';
	
	return output;
}

function buildOverlay(userName,moustacheSrc,userOverlayPicture,lienFacebook,overlayWeek){
	 
	var output = '';
	output += '<div class="overlay_top"><span class="name">'+userName+'</span><span class="semaine">'+overlayWeek+'</span><div class="clearboth"></div></div>';
	output += '<img src="'+userOverlayPicture+'" alt="" />';
	output += '<div class="overlay_bottom">';
		if(lienFacebook != "#") {
		output += '<div class="overlay_link">';
			/*output += '<a target="_blank" href="'+lienFacebook+'">';
			output += '<p>Laisser un commentaire</p>';
			output += '<img src="assets/images/fbThumb.png"/>';
			output += '</a><div class="clearboth"></div>';*/
		output += '</div>';
		}
	output += '<div class="clearboth"></div></div>';
	return output;
}