$(function(){
$.ajax({
    url:'works-list.xml',
    type: 'GET',
    dataType: 'xml',
    timeout: 1000,
    error: function(xml){
		location.reload();
        //alert('Error in reading XML: '+xml);
    },
    success: function(xml){
	//$(window).fadeTo(1000,1);
        $(xml).find("prj").each(function(i){    
            var total=$(xml).find("prj").length;
			var thumbsrc=$(this).children("info").children("thumb").children("image").first().attr('src');
			var thumbover=$(this).children("info").children("thumb").children("image").first().next().attr('src');
			var desc1=$(this).children("info").attr("desc1");
			var desc2=$(this).children("info").attr("desc2");
			var cat=$(this).children("info").attr("cat");
			var catname=$(this).children("info").attr("catname");
			var id=i;
			
			//alert("set: "+id+" | totalimg= "+totalimg);
			//alert(id+" | "+total+" | "+thumbsrc+" | "+thumbover+" | "+desc1+" | "+desc2+" | "+cat);
			
			
			
		$('#all-prjs').append('<li data-id=' + id + ' data-type="' + cat + '" ><div class="prj"><a class="thumb"><div class="cover"></div><span class="circle-prj"></span><div class="prj-name" style="background:url('+thumbover+');"></div><img src=' + thumbsrc +' /><h2>'+catname+'</h2><h3>'+id+'</h3></a> </div> </li>');
		if(i==0){
		$('#works-title').append('<strong>PROJECT</strong>&nbsp;/&nbsp;<span class="desc1">'+desc1+'</span><br /><strong>CLIENT</strong>&nbsp;/&nbsp;<span class="desc2">'+desc2+'</span>');
		}
		
		if(i==total-1){
		var $applications = $('#all-prjs');
        	
          	// clone applications to get a second collection
          	var $data = $applications.clone();

            // attempt to call Quicksand on every form change
         // 	$filterType.add($filterSort).change(function(e) {
		  $(".menu-class").delegate("a","click",function() {
		  if(display != false){
		  	$('#works-display a.toggle-arr').triggerHandler('click');
			}

		  $.scrollTo($('#all-prjs').position().top-20 ,500);
          		if ($(this).attr("rel") == 'all') {
          			var $filteredData = $data.find('li');
          		} else {
			var $filteredData = $data.find('li[data-type~=' + $(this).attr("rel") + ']');
          		}
              
          		// if sorted by name
          			var $sortedData = $filteredData.sorted({
          				by: function(v) {
          					return $(v).find('h3').text();
          				}
          			});
          		
        		
          		// finally, call quicksand
          	  $applications.quicksand($sortedData, {
          	    duration: 800,
          	    easing: 'easeInOutQuad'
          	  },function(){
			  if(currentprj!= -1){
			  $('#all-prjs li[data-id='+currentprj+']').find("a").toggleClass('curr');
			  }
			  });
			  
          	});
			
		
		
		////////////
		function replaceContent(curr){
			var currentdesc1 = $(xml).find('prj:eq('+curr+')').children('info').attr('desc1');
			var currentdesc2 = $(xml).find('prj:eq('+curr+')').children('info').attr('desc2');

			$('.desc1').replaceWith('<span class="desc1">'+currentdesc1+'</span>');
			$('.desc2').replaceWith('<span class="desc2">'+currentdesc2+'</span>');
		
			var num = $(xml).find('prj:eq('+curr+') display image').length;
			var imgtotal = num;
			var j=0;
			//orbit = false;
		$('#featured').remove();
		$('.orbit-wrapper').remove();				 					
		$('#featured-wrapper').append('<div id="featured"></div>');
		$('#fb').empty();
		$('#tw').empty();
		$('#go').empty();

		$('#fb').append('<a href="https://www.facebook.com/sharer.php?u=http://www.circledesign.com.hk/share/'+curr+'.html" class="share_pop"><img src="images/fb_share.png" /></a>');
		$('#tw').append('<a href="https://twitter.com/share?url=http://www.circledesign.com.hk/share/'+curr+'.html" class="share_pop"><img src="images/twitter_share.png" /></a>');
		$('#go').append('<a href="https://plusone.google.com/_/+1/confirm?hl=en&url=http://www.circledesign.com.hk/share/'+curr+'.html" class="share_pop"><img src="images/google_share.png" /></a>');
		
			$(xml).find('prj:eq('+curr+') display image').each(function(i){
				$('#featured').append('<img src='+$(this).attr('src')+' />');
			});
			var currImg = 0;
			$('#featured').find('img').each(function(i){
				$(this).load(function(){
				currImg++;
				$(this).hide();
					if(currImg==imgtotal){ 	
						$('#featured').orbit();
						$('#featured').find('img').fadeIn(0);
					}
				});
			});
}

		$('.share_pop').popupWindow({ 
		height:350, 
		width:500, 
		centerScreen:1
		});
		
		$("#works-display").hide();
		var currentprj = -1;
		display = false;
		orbit = false;
		pos = $("#works-display").position().bottom;
		$("#works-container").animate({
    opacity: 0}, 0);
//Toggle Function
$("#all-prjs").delegate("a","click",function(){
			if(currentprj != $(this).parent().parent().attr('data-id')){
			$.scrollTo($('#works-menu').position().top , 500 );
			
			
			$(this).toggleClass("curr");
			$('#all-prjs li[data-id='+currentprj+']').find("a").toggleClass('curr');

			 currentprj = $(this).parent().parent().attr('data-id');
			 window.location.hash = currentprj;
						if(display == false){
							replaceContent(currentprj);
							display = true;
							$("#works-container").animate({
									opacity: 1},1000);
							$("#works-display").slideToggle("slow",function(){
							$('#toggle-arrow').fadeIn(500);
							});						
	}else{
	$("#works-container").animate({
    opacity: 0
  }, 1000, function() {
    // Animation complete.
	
	$('.orbit-bullets li').first().triggerHandler('click');
	replaceContent(currentprj);
	$("#works-container").animate({
		opacity: 1},1000);
	});
}
$('#contact').animate({
opacity: 0});//$('#works-container').position.bottom});
}
});
	
	//Check hash
 if(window.location.hash) {
      var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
	  if((hash != "identity") && (hash != "communication") && (hash != "editorial") && (hash != "package") && (hash != "philately")) {
		  $('#all-prjs li[data-id='+hash+']').find("a").toggleClass('curr');
			 				currentprj = hash;
							replaceContent(currentprj);
							display = true;
							$("#works-container").animate({
									opacity: 1},1000);
							
							$("#works-display").slideToggle("slow",function(){
							$('#toggle-arrow').fadeIn(500);
							});	
							$('#contact').animate({
							opacity: 0});
	
	  }else{
      // clone applications to get a second collection
	  var $filteredData = $data.find('li[data-type~=' + hash + ']');
	  var $sortedData = $filteredData.sorted({
          				by: function(v) {
          					return $(v).find('h3').text();
          				}
          			});
	// finally, call quicksand
          	  $applications.quicksand($sortedData, {
          	    duration: 0,
          	    easing: 'easeInOutQuad'
          	  });
	  
	  
	  var $el, leftPos, newWidth;

	switch(hash){
		  case 'identity':
		  leftPos =  81;
		  newWidth = 65;
		  break;
		  case 'communication':
		  leftPos =  161;
		  newWidth = 128;
		  break;
		  case 'editorial':
		  leftPos =  304;
		  newWidth = 78;
		  break;
		  case 'package':
		  leftPos =  397;
		  newWidth = 92;
		  break;
		  case 'philately':
		  leftPos =  502;
		  newWidth = 80;
		  break;
		  default:
		  leftPos =  40;
		  newWidth = 29;
	  }
	
    var $magicLine = $("#works-menu #magic-line");
	var $clonedmagicLine = $(".floatingHeader #magic-line");
    $magicLine
        .width(newWidth)
        .css("left", leftPos)
        .data("origLeft", leftPos)
        .data("origWidth", newWidth);
	  }
		
	
	
      // hash found
  } else {
      // No hash found
  }
  
$("#works-display a.toggle-arr").click(function(){
$("#works-container").animate({
    opacity: 0
  });
$('#contact').animate({
opacity: 1});
	$('.orbit-bullets li').first().triggerHandler('click');

	$('#all-prjs li:eq('+currentprj+')').find("a").toggleClass('curr');
	currentprj = -1;
	display = false;
	$("#works-display").slideToggle("slow",function(){
	});
	});
		}//append finish
 });
 }
 });
 $('img').load(function(){
 $(this).fadeIn(1000);
 });





});