startTpl = '<div class="contenedor1"> ' +
  '<div class="menu_superior"> ' +
    '<ul> ' +
      '<li><a href="contact.html" target="_blank" class="boton-1" rel="popup">CONTACT</a></li>' +
      '<li><a href="mailto:toc-toc@minnim.tv" class="boton-2">WORK WITH US</a></li>' +
      '<li><g:plusone size="medium" count="false"></g:plusone></li>' +
      '<li><a href="http://www.facebook.com/minnim.tv" class="boton-3" target="_blank">FOLLOW US</a></li>' +
    '</ul>' +
  '</div>' +
  '<div class="menu"> <img id="menuDot" src="img/interface/punto.gif" style="position:absolute;top:4px;right:22px"/>' +
    '<ul>' +
      '<li class="activo">' +
        '<h2><a href="#seccion-1" class="boton-1">REEL</a></h2>' +
      '</li>' +
      '<li>' +
        '<h2><a href="#seccion-2" class="boton-2">WEBSITE</a></h2>' +
      '</li>' +
      '<li>' +
        '<h2><a href="#seccion-3" class="boton-3">MOVIE</a></h2>' +
      '</li>' +
      '<li>' +
        '<h2><a href="#seccion-4" class="boton-4">CAMPAIGN</a></h2>' +
      '</li>' +
      '<li>' +
        '<h2><a href="#seccion-5" class="boton-5">PRINT</a></h2>' +
      '</li>' +
      '<li>' +
        '<h2><a href="#seccion-6" class="boton-6">PHOTO</a></h2>' +
      '</li>' +
      '<li>' +
        '<h2><a href="http://music.minnim.tv" class="boton-7 music" target="_blank">MUSIC</a></h2>' +
      '</li>' +
    //  '<li>' +
     //   '<h2><a href="#seccion-8" class="boton-8">T-SHIRT</a></h2>' +
     // '</li>' +
    	' <li class="boton-site" style="display:none"><a href="mailto:contact@minnim.tv" class="boton-site boton-site-1">CONTACT</a></li>' +
    	' <li class="boton-site" style="display:none"><a href="mailto:toc-toc@minnim.tv" class="boton-site boton-site-2">WORK WITH US</a></li>' +
    	' <li class="boton-site" style="display:none"><a href="http://www.facebook.com/minnim.tv" target="_blank" class="boton-site boton-site-3">FOLLOW US</a></li>' +
    ' </ul>' +
    '<h1 class="logo"><a href="http://www.minnim.tv">Agencia interactiva de Barcelona<img src="img/interface/minnim.gif" alt="Agencia interactiva de Barcelona" /></a></h1>' +
  '</div>' +
  '<div class="pie"></div>' +
'</div>' + //contenedor 1
'<div class="contenedor2">' +
  '<div class="contenido">' +
    '<div class="seccion" id="seccion-1" style="margin-bottom:120px;">' +
      //'<div class="visor"> <img src="img/website/aquarel1.jpg" alt=""/> </div>' +
	  '<div class="visor">' +
	        '  <div class="imagenes_visor" style="z-index:1">' +
'<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="594" height="340" align="middle">' +
'<param name="allowScriptAccess" value="sameDomain" />' +
'<param name="wmode" value="transparent" />' +
'<param name="flashvars" value=\'video=reel.mp4&amp;duration=00:00&amp;thumb=img/reel/reel.jpg\' />' +
'<param name="movie" value="media/player_minnim_1.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" />'+
'<embed src="media/player_minnim_1.swf" quality="high" wmode="transparent" bgcolor="#000000" width="594" height="340" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_es" flashvars=\'video=reel.mp4&amp;duration=00:00&amp;thumb=img/reel/reel.jpg\'/>' +
'</object>' +
	  	'</div>' + 
	  '</div>' +
      '<div class="textos">' +
       '<h3>Agencia interactiva de Barcelona.</h3>' +
        '<p>En minnim nos dedicamos a la comunicaci&oacute;n on-line, en cualquiera de los formatos que existen o que todav&iacute;a no existen. Hemos trabajado entre otros con women\'secret, ligeresa, aquarel, ajuntament de  barcelona - departament medi ambient, diputaci&oacute; de barcelona, paypal y banc de sang.</p>' +
        '<h3>Barcelona Interactive Agency.</h3>' +
        '<p>At minnim, we work on online communication, in any of its different formats that already exist or not. Among others, we have worked for women\'secret, ligeresa, aquarel, ajuntament de barcelona - departament de medi ambient, diputaci&oacute; de barcelona, paypal and banc de sang.</p>' +
        '<p class="direccion">c. diputaci&oacute;, 297 2&ordm; 2&ordf;-b  /  08009 bcn  /  telf. (+34) 93 272 59 46</p>' +
      '</div>' + //textos
	//'</div>' + //contenido
  '</div> ';//contenedor2

var testSectionTpl = '<div class="seccion" id="seccion-2">' +
      '<div class="visor">' +
      '  <div class="imagenes_visor"> <img id="imgLoader" src="img/interface/loader.gif" style="position:absolute;top:154px;left:280px;display:none"/> ' +
	  '<div style="position:absolute;top:154px;left:5px;width:25px;height:25px;display:block;background-color:red">LEFT</div>' +
	  '<img id="imgMain" src="img/website/aquarel1.jpg" /> </div>' +
      '</div>' +
      '<div class="info_visor">' +
      ' <div class="descripcion">' +
      '    <h3>WEBSITE - HAPYPILLS</h3>' +
      '    <p>website and e-commerce</p>' +
      '  </div>' +
      '  <div class="selector">' +
      '   <ul>' +
      '      <li><a href="img/website/aquarel1.jpg" target="_blank" class="activo">1</a></li>' +
      '      <li><a href="img/website/wiladecans1.jpg" target="_blank">2</a></li>' +
      '      <li><a href="img/website/happy1.jpg" target="_blank">3</a></li>' +
      '      <li><a href="img/website/ligeresa1.jpg" target="_blank">4</a></li>' +
      '    </ul>' +
      '    <a href="#" class="boton-1 projectButton">View project</a> </div>' +
      '  <div class="compartir"> share with <a href="#" ><img src="img/interface/facebook.jpg" alt="Facebook" /></a> <a href="#"><img src="img/interface/twitter.jpg" alt="Twitter" /></a> </div>' +
      '</div>' +
      '<div class="galeria">' +
      '  <a class="activo" href="?project=0"><img src="img/website/wiladecans_mini.gif" alt="" /></a>' +
      '  <a href="?project=1"><img src="img/website/happy_mini.jpg" alt="" /></a>' +
      '  <a href="?project=2"><img src="img/website/aquarel_mini.jpg" alt="" /></a>' +
      '  <a href="?project=3"><img src="img/website/ligeresa_mini.gif" alt="" /></a>' +
      '  <a href="?project=4"><img src="img/website/womensecret_mini.jpg" alt="" /></a>' +
      '  <a href="?project=5"><img src="img/website/wow_mini.gif" alt="" /></a>' +
      '  <a href="?project=6"><img src="img/website/blogwomensecret_mini.gif" alt="" /></a>' +
      '  <a href="?project=7"><img src="img/website/diba_mini.jpg" alt="" /></a>' +
      '  <a href="?project=8"><img src="img/website/colorimpar_mini.jpg" alt="" /></a>' +
      '  <a href="?project=9"><img src="img/website/trasat_mini.jpg" alt="" /></a>' +
      '  <a href="?project=10"><img src="img/website/baula_mini.jpg" alt="" /></a>' +
      '  <a href="?project=11"><img src="img/website/atac_mini.jpg" alt="" /></a>' +
      '  <a href="?project=12"><img src="img/website/lycra_mini.jpg" alt="" /></a>' +
      '  <a href="?project=13"><img src="img/website/velvet_mini.jpg" alt="" /></a>' +
      '  <a href="?project=14"><img src="img/website/highgrowth_mini.jpg" alt="" /></a>' +
      '  </div>' +
   ' </div>';
   
var sectionTpl = '<div class="seccion" id="seccion-%ID%">' +
      '<div class="visor">' +
      '  <div class="imagenes_visor"> <img class="imgLoader" src="img/interface/loader.gif" style="position:absolute;top:154px;left:280px;display:none"/> '+
	  '<div id="prevPic" style="" class="prevPic"></div>'+
	  '<div id="nextPic" style="" class="nextPic"></div>'+
	  '<img class="imgMain" src="%IMG_MAIN%" /> </div>' +
      '</div>' +
      '<div class="info_visor">' +
      ' <div class="descripcion">' +
      '    <h3>%TITLE%</h3>' +
      '    <p>%DESC%</p>' +
      '  </div>' +
      '  <div class="selector">' +
      //'   <ul>' +
	  '   %IMG_LIST%' +
     // '    </ul>' +
      '    %PROJECT_URL% </div>' +
      '  <div class="compartir"> share with <a class="fbSharer" href="#" target="_blank" rel="nofollow"><img src="img/interface/facebook.jpg" alt="Facebook" /></a> <a class="twSharer" href="#" target="_blank" rel="nofollow"><img src="img/interface/twitter.jpg" alt="Twitter" /></a> </div>' +
      '</div>' +
      '<div class="galeria">' +
	  '   %PROJECT_LIST%' +
      '  </div>' +
   ' </div>';


var sectionVideoTpl = '<div class="seccion" id="seccion-%ID%">' +
      '<div class="visor">' +
      '  <div class="imagenes_visor" style="z-index:1">' +
'<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" id="flashVideo" width="594" height="340" align="middle">' +
'<param name="allowScriptAccess" value="sameDomain" />' +
'<param name="wmode" value="transparent" />' +
'<param name="flashvars" value=\'video=%VIDEO%&amp;thumb=%THUMB%&amp;duration=00:00\' />' +
'<param name="movie" value="media/player_minnim_2.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" />'+
'<embed src="media/player_minnim_2.swf" quality="high" wmode="transparent" bgcolor="#000000" width="594" height="340" id="flashVideo" name="flashVideo" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_es" flashvars=\'video=%VIDEO%&amp;thumb=%THUMB%&amp;duration=00:00\'/>' +
'</object>' +
	  '</div>' +
      '</div>' +
      '<div class="info_visor">' +
      ' <div class="descripcion">' +
      '    <h3>%TITLE%</h3>' +
      '    <p>%DESC%</p>' +
      '  </div>' +
      '  <div class="selector">' +
      //'   <ul>' +
	  '   %IMG_LIST%' +
      //'    </ul>' +
	  '    %PROJECT_URL% </div>' +
      //'    <a href="%PROJECT_URL%" class="boton-1 projectButton" target="_blank">View project</a> </div>' +
	 // ' <a href="#" target="_blank" id="testVideo">TEST</a>' +
      '  <div class="compartir"> share with <a class="fbSharer" href="#" target="_blank" rel="nofollow"><img src="img/interface/facebook.jpg" alt="Facebook" /></a> <a class="twSharer" href="#" target="_blank" rel="nofollow"><img src="img/interface/twitter.jpg" alt="Twitter" /></a> </div>' +
      '</div>' +
      '<div class="galeria">' +
	  '   %PROJECT_LIST%' +
      '  </div>' +
   ' </div>';

var finalSectionTpl = '<div class="seccion" id="seccion-%ID%" style="margin-bottom:0px;">' +
      '<div class="visor">' +
      '  <div class="imagenes_visor"> <img class="imgLoader" src="img/interface/loader.gif" style="position:absolute;top:154px;left:280px;display:none"/> '+
	  '<div id="prevPic" style="" class="prevPic"></div>'+
	  '<div id="nextPic" style="" class="nextPic"></div>'+
	  '<img class="imgMain" src="%IMG_MAIN%" /> </div>' +
      '</div>' +
      '<div class="info_visor">' +
      ' <div class="descripcion">' +
      '    <h3>%TITLE%</h3>' +
      '    <p>%DESC%</p>' +
      '  </div>' +
      '  <div class="selector">' +
      //'   <ul>' +
	  '   %IMG_LIST%' +
      //'    </ul>' +
      '    %PROJECT_URL% </div>' +
      '  <div class="compartir"> share with <a class="fbSharer" href="#" target="_blank" rel="nofollow"><img src="img/interface/facebook.jpg" alt="Facebook" /></a> <a class="twSharer" href="#" target="_blank"><img src="img/interface/twitter.jpg" alt="Twitter" /></a> </div>' +
      '</div>' +
      '<div class="galeria">' +
	  '   %PROJECT_LIST%' +
      '  </div>' +
	  ' <div id="seccionFinal"  style="width:100%;height:0px;"> </div>' +
   ' </div>';

var endTpl = ' </div></div>';

function inspect(text){
	return 	text.split(",").join(",\n");
}

function getSiteProject(xml, section, index){
	var node = 	$(xml).find('section[id="'+section+'"]').find("project").get(index);
	var title = $(node).find('title').text();
	var url = $(node).find('url').text();
	var desc =  $(node).find('desc').text();
	var thumb = $(node).find('thumbnail').text();
	
	var gallery = new Array();
		$(node).find("img").each(function(){
			gallery.push($(this).attr("url"));
		});
		
	var video = new Array();
		$(node).find("img").each(function(){
			video.push($(this).attr("video"));
		});	
		
	var output = {
		title: title,
		url: url,
		desc:desc,
		thumb:thumb,
		gallery:gallery,
		video:video
	};
	
	return output;
}

function buildSectionTpl(xml, section, sectionId, index, final){
	var project = getSiteProject(xml, section, index);
	var tpl = sectionTpl;
	if(final) tpl = finalSectionTpl;
	tpl = tpl.replace("%ID%", sectionId);
	tpl = tpl.replace("%TITLE%", project.title);
	tpl = tpl.replace("%DESC%", project.desc);
	tpl = tpl.replace("%PROJECT_URL%", getProjectUrlHTML(project.url));
	tpl = tpl.replace("%IMG_MAIN%", project.gallery[0]);
	tpl = tpl.replace("%IMG_LIST%", getImgListHTML(project.gallery, project.url));
	tpl = tpl.replace("%PROJECT_LIST%", getSectionThumbnailsHTML(xml, section));
	return tpl;
}

function buildSectionVideoTpl(xml, section, sectionId, index, final){
	var project = getSiteProject(xml, section, index);
	var tpl = sectionVideoTpl;
	if(final) tpl = finalSectionTpl;
	
	tpl = tpl.replace("%ID%", sectionId);
	tpl = tpl.replace("%TITLE%", project.title);
	tpl = tpl.replace("%DESC%", project.desc);
	tpl = tpl.replace("%PROJECT_URL%", getProjectUrlHTML(project.url));
	//tpl = tpl.replace("%IMG_MAIN%", project.gallery[0]);
	tpl = tpl.replace("%IMG_LIST%", getImgListHTML(project.gallery, project.url));
	tpl = tpl.replace("%PROJECT_LIST%", getSectionThumbnailsHTML(xml, section));
	var video = project.video[0];
	if(video.lastIndexOf(".f4v") == -1) video = project.video[0] +".mp4";
	
	tpl = tpl.replace(/%VIDEO%/g, video);
	tpl = tpl.replace(/%THUMB%/g, project.gallery[0]);
	//window.console.log(project.video);
	return tpl;
}

function getImgListHTML(galleryObj, url){
	var output = "<ul>";
	var len = $(galleryObj).length;
	if(url == ""){
		output = '<ul class="centrado">';
		if(len == 1){
			output = '<ul style="display:none">';
		}
	}
	
	$(galleryObj).each(function(index){
		if(index == 0) output+='<li><a href="'+ this +'" target="_blank" class="activo">'+(index+1)+'</a></li>';
		else output+='<li><a href="'+ this +'" target="_blank" >'+(index+1)+'</a></li>';
	});
	output += "</ul>";
	return output;
}

function getSectionThumbnailsHTML(xml, section){
	var output = "";
	var node = 	$(xml).find('section[id="'+section+'"]').find("project");
	node.each(function(index){
		var thumb = $(this).find('thumbnail').text();
		if(index == 0) output+='<a class="activo" href="?section='+ section.toLowerCase() +'&project='+ index +'"><img src="img/'+thumb+'" alt="" /></a>';
		else output+='<a href="?section='+ section.toLowerCase() +'&project='+ index +'"><img src="img/'+thumb+'" alt="" /></a>';		   
	});
	
	return output;
}

function getProjectUrlHTML(url){
	var output = "";
	if(url!=""){
		output = '<a href="' + url + '" class="boton-1 projectButton" target="_blank">View project</a>';
	}
	
	return output;
}

function getSectionProjects(xml, section){
	return $(xml).find('section[id="'+section+'"]').find("project");
}
