/*
 * © De Media Winkel 2011
 * I'm not a webdeveloper, so don't judge me on my code.
 * Especially you, Danny
*/

// portfolio
function laadxml(){
	$.get('xml/portfolio.xml', function(d){
		var nummer = 0;
	        $(d).find('project').each(function(){
	        	var $project = $(this);
	        	var title = $project.attr('title');
	        	var imagecount = $project.attr('images');
	        	var vimeo = $project.attr('vimeo');
	        	var largetitle = $project.find('largetitle').text();
	        	var description = $project.find('description').text();
	        	var work = $project.find('work').text();
	        	var client = $project.find('client').text();
	        	var agency = $project.find('agency').text();
	        	if (agency != ""){
	        			var overlaytxt = "<h3>werk</h3><hr /><p>"+work+"</p><hr /><h3>klant</h3><hr /><p>"+client+"</p><hr /><h3>bureau</h3><hr /><p>"+agency+"</p>";
	        		} 
	        		else {
	        			var overlaytxt = "<h3>werk</h3><hr /><p>"+work+"</p><hr /><h3>klant</h3><hr /><p>"+client+"</p>";
	        		};
	        	
	        	var image = $project.attr('image');
	        	var _item = $('<div id="item'+nummer+'" class="portfolioitem">\
					<div id="title">'+ title +'</div>\
					<div id="overlay">\
						<div id="overlaytxt">'+ overlaytxt +'</div>\
					</div>\
					<div id="thumb">\
						<img id="thumbn" src="images/thumbnail/'+ image +'.jpg" alt="'+ title +'"/></div>\
					</div>'); 
	        	 $("#portfoliowrap").prepend(_item);
	        	 nummer++;
	        	 aantalitems = nummer;
	        	 var overlay = _item.children().eq(1);
	        	 var hoogte = 75-(overlay.children().height()/2);
	        	 overlay.children().css({top:hoogte});
	        	 _item.hover(
	        	 	function (){
	        	 		overlay.stop().animate({ bottom:'0px' },400, 'easeOutSine')
  					}, 
  					function () {
    					overlay.stop().animate({ bottom:'-150px' },400, 'easeInSine')
  					});
  				 _item.click(function(){
  				 	openportfolio(image,largetitle,description,work,imagecount,client,agency,vimeo);
  				 	_gaq.push(['_trackEvent', 'Portfolio', largetitle, largetitle]);
  				 });
	        });
	        gridopbouw();
	});	  
};

function gridopbouw() {
	var widthtotal = $(window).width();
	var breedte=155;
	var aantalopregel = Math.floor(widthtotal/breedte);
	if(aantalopregel > 6){
		aantalopregel = 6;
	};
	var xmarge = (widthtotal-(aantalopregel*breedte))/2;
	$('#portbig').css('left',xmarge)
		.css('width',(aantalopregel*breedte)-5)
		.css('height',portfolioy);
	$('#img_holder').css('width',(aantalopregel*breedte)-15);

 	for (var i=0; i < aantalitems; i++) {
 		var links = i % aantalopregel;
 		var regel = Math.floor(i/aantalopregel);
 		var items = $('#portfoliowrap').children().eq(i);
 		items.stop().animate({
    		left: Math.round(links*breedte+xmarge),
    		top: regel*breedte+topmarge
  		}, 500, 'easeOutSine');
	 };	
}

function openportfolio (fullimage,largetitle,omschrijving,work,imagecount,client,agency,vimeo) {
   //check if open
   if(portfolioopen == true && activeproject != fullimage){
   	
   	$('#portbig').slideUp({
		duration:500,
		easing:"easeInOutSine",
		complete:function(){
	  		resetplaatjes();
		  	portfolioopen= false;
		  	openportfolio(fullimage,largetitle,omschrijving,work,imagecount,client,agency,vimeo);	
		  }
  });
  } else {
	  activeproject = fullimage;
	  $('#omschrijving').hide(); //overlay uit tot geladen
	  topmarge = portfolioy+5; //thumbs slide down
	  $('#portbig').slideDown({
		duration:500,
		easing:"easeInOutSine",
		complete:function(){
			$('#omschrijving').show();
			//bullits genereren
			var links = (915-(fotoaantal*20-25))/2; 
			$('#bullitholder').css('left',links+'px');
			if(fotoaantal>1){
			for (var i=0; i < fotoaantal; i++){
 				var $henk=$('#bullit'+i);
 				$henk.fadeIn();
 				}
 			}	
		}
		});
	  imageload(fullimage,0); // load first image
	  vimeo_url = vimeo; //vimeo url
	  gridopbouw();
	  //place texts
	  $('#largetitle').text(largetitle);
	  var teksten=$('#omschrijvingbody');
	  teksten.children('#omschrijvingtxt').text(omschrijving);
	  teksten.children('#worktxt').text("werk: "+work);
	  if (agency != ""){
	  	teksten.children('#clienttxt').text("client: "+client+"   • agency: "+agency);	
	  } else {
	  	teksten.children('#clienttxt').text("client: "+client);	
	  } 
	  portfolioopen= true;
	  //pijlen
	  fotoaantal=imagecount;
	  $('#vorigefoto').hide();
	  if (fotoaantal==1) {
	  	$('#volgendefoto').hide();
	  } else {
	  	$('#volgendefoto').show()
			.children().hide();
	  }
	  $('#bullit0').addClass('actief');
  }
}

function sluitportfolio (snelheid) {
	$('#portbig').slideUp({
		duration:500,
		easing:"easeInOutSine",
		complete:function(){
	  		resetplaatjes();
		  	portfolioopen= false;	
		}
	});
	topmarge = 0;
	gridopbouw();
	$('html, body').animate({scrollTop:0}, 'slow');
}

function resetplaatjes(){
	var holder= $('#img_holder').children();
  	holder.addClass('loading');
  	holder.children("img").fadeOut('slow', function() {
    	holder.children("img").remove();
    	holder.children("iframe").remove();
	    holder.css('left', function(i, v) {
	    	return (parseFloat(v) + (fotonr*fotoscroll)) + 'px';
		});
		fotonr=0;
  	});
  	//bullits weg
	$('#bullits').each(function(){
			var $allbullits = $('li', this);
			$allbullits.hide()
			.removeClass('actief');
		});
};

function imageload(fullimage,nummer){
	var img = new Image();
  	$(img)
	    .load(function () {  
	      $(this).hide();
	      $('#portf_img'+(nummer))
	        .removeClass('loading')
	        .append(this);
	      $(this).fadeIn();
    })
    .error(function () {
  //evt error functie
    })
    .attr('src', 'images/full/'+fullimage+(nummer+1)+'.jpg');
}
//pijlen functions
function next_image () {
	fotonr++;
	beweegimages(fotonr);
}
function previous_image () {
	fotonr--;
	beweegimages(fotonr);
}
// bullit images
function beweegimages(imagenr) {
	//knoppen hide/show
	var targetdiv = $('#portf_img'+imagenr);
	if (imagenr>0){
		$('#vorigefoto').show().children().hide();
	} else {
		$('#vorigefoto').hide();
	}
	if (imagenr==(fotoaantal-1)) {
		$('#volgendefoto').hide();	
	} else {
		$('#volgendefoto').show().children().hide();	
	}
	// bullits
	$('#bullits').each(function(){
		var $allbullits = $('li', this);
		$allbullits.removeClass('actief');
	});
	$('#bullit'+imagenr).addClass('actief');
	// img load
	
	if (targetdiv.hasClass ('loading')){
		if (vimeo_url != "x" && imagenr==(fotoaantal-1)) {
			var embedcode = "<iframe src=\"http://player.vimeo.com/video/"+vimeo_url+"?title=0&amp;byline=0&amp;\portrait=0&amp;color=555555\" width=\"915\" height=\"405\" frameborder=\"0\" webkitAllowFullScreen allowFullScreen></iframe>"
			$('#omschrijving').hide();
			$('#portf_img'+imagenr)
		        .append(embedcode)
		        .hide();
		} else {
			imageload(activeproject,imagenr);
		}	
	}
	// beweging	
	var beginx = $('#portf_img0').css("left");
	var verplaats = -(imagenr*fotoscroll);
	var scroll = (verplaats-parseFloat(beginx));
	$('#img_holder').children().animate({
			left: '+='+scroll
		}, 1000, 'easeOutSine', function() {
		   $('#portf_img'+(imagenr))
		   	.removeClass('loading')
		   	.fadeIn();
	});
};