// MASONRYFOLIOMACHINE - BY SIEB & GAYA

var images_preloaded = 0;
var images_to_preload = 0;
var root_url = "/#";
var basis_url = root_url + "/";
var stuffhash = window.location.hash;
var closedButton = false;
var clickedThumb = false;
var openingItem = false;
var object_tmp = "";

$(document).ready(function() {	
	snorFix();
	
	$(".thumb .image").click(function()
	{
	    var item_url = $(this).parent().find(".item_url").text();
	    window.location = basis_url + item_url;
	    clickedThumb = true;
	}); 

	//close
	$(".thumb .close").click(function()
	{
		clickedThumb = false;
		closedButton = true;
		verstopSnor(this);
		$('.board').masonry({ columnWidth: 190, itemSelector: '.thumb, .big, .extra, .extra-still', animate: true });
	}); 
	
	
	//thumb hover
	$(".thumb").hover(function() {					
		//$(this).css({ opacity: "0.5" });
		$(this).find('.image-label').stop().animate({ bottom: "-22px" }, 500);
		$(this).find('.image img').stop().animate({ marginTop: "-50px" }, 500); /* = -170 */
	} , function() { 
		//$(this).css({ opacity: "1" });
		$(this).find('.image-label').stop().delay(500).animate({ bottom: "-200px" }, 500);
		$(this).find('.image img').stop().delay(500).animate({ marginTop: "0px" }, 500);
	});	
		//FIRST! thumb hover
		$(".textdiv").hover(function() {					
			//$(this).find('.image-label').stop().animate({ bottom: "10px" });
			$(this).find('.image img').stop().animate({ marginTop: "-180px" }, 500);
		} , function() { 
			$(this).find('.image-label').stop().delay(500).animate({ marginTop: "0px" }, 500);
			//$(this).find('.image img').stop().css({ marginTop: "0px" });
		});
		//EXTRA thumb hover	
		$(".extra").hover(function() {					
			
		} , function() { 
			
		});	
		// facebook like
		$(".facebook").hover(function() {					
			$(this).find('.image img').stop().animate({ marginTop: "-180px" }, 1000);
			$(this).find('.image #like-button').stop().animate({ bottom: "35px" }, 1000);
		} , function() { 
			$(this).find('.image img').stop().animate({ marginTop: "0px" }, 1000);
			$(this).find('.image #like-button').stop().animate({ bottom: "-35px" }, 1000);
		});	
		// social media pad
		$(".social").hover(function() {	
			$(this).find('.image img').stop().animate({ marginTop: "-180px" }, 1000);
			$(this).find('.image #social-buttons').stop().animate({ bottom: "25px" }, 1000);
		} , function() { 
			$(this).find('.image img').stop().animate({ marginTop: "0px" }, 1000);
			$(this).find('.image #social-buttons').stop().animate({ bottom: "-35px" }, 1000);
		});	
			$("#social-buttons a").hover(function() {					
				$(this).stop().animate({ marginTop: "5px" }, 500);
			} , function() { 
				$(this).stop().animate({ marginTop: "0px" }, 500);
			});	
		// mailstage form fade
		$(".mailstage").hover(function() {	
			$(this).find('#signup_form').stop().animate({ opacity: "1" }, 500);
		} , function() { 
			$(this).find('#signup_form').stop().delay(500).animate({ opacity: "0" }, 500);
		});				

	/* info section switcher */
	$(".textmenu ul li.first").click(function() { 
		$(".subcontent").css({ display: "none" });
		$(".text .content").css({ display: "block" });
		$(".textmenu ul li").css({ fontSize: "12px", fontWeight: "normal", height: "12px" });
		$(this).css({ fontSize: "21px", fontWeight: "bold", height: "21px" });
		/* change bgcolor + shadow */ $(".text").css({ backgroundColor: "#efefef", color: "#333", textShadow: "#e5e4e4 1px 1px 1px", backgroundImage: "url('images/logo.png')" });
		/* change border menu items */ $(".textdiv .text .textmenu ul li ").css({ borderBottom: "1px solid #ccc" });
		
	});			
	$(".textmenu ul li.part2").click(function() { 
		$(".content, .subcontent").css({ display: "none" });
		$(".text .part2").css({ display: "block" });
		$(".textmenu ul li").css({ fontSize: "12px", fontWeight: "normal", height: "12px" });
		$(this).css({ fontSize: "21px", fontWeight: "bold", height: "21px" });
		/* change bgcolor */ $(".text").css({ backgroundColor: "#ff7e00", color: "#fff", textShadow: "#e16317 1px 1px 1px", backgroundImage: "url('images/logo_w.png')" });
		/* change border menu items */ $(".textdiv .text .textmenu ul li ").css({ borderBottom: "1px solid #e16317" });		
	});	
	$(".textmenu ul li.part3").click(function() { 
		$(".content, .subcontent").css({ display: "none" });
		$(".text .part3").css({ display: "block" });
		$(".textmenu ul li").css({ fontSize: "12px", fontWeight: "normal", height: "12px" });
		$(this).css({ fontSize: "21px", fontWeight: "bold", height: "21px" });
		/* change bgcolor */ $(".text").css({ backgroundColor: "#ee2024", color: "#fff", textShadow: "#9b181b 1px 1px 1px", backgroundImage: "url('images/logo_w.png')" });
		/* change border menu items */ $(".textdiv .text .textmenu ul li ").css({ borderBottom: "1px solid #9b181b" });			
	});		
	/* currently unused: */ $(".textmenu ul li.part4").click(function() { 
		$(".content, .subcontent").css({ display: "none" });
		$(".text .part4").css({ display: "block" });
		$(".textmenu ul li").css({ fontSize: "12px", fontWeight: "normal", height: "12px" });
		$(this).css({ fontSize: "21px", fontWeight: "bold", height: "21px" });
	});			
	/* currently unused: */ $(".textmenu ul li.part5").click(function() { 
		$(".content, .subcontent").css({ display: "none" });
		$(".text .part5").css({ display: "block" });
		$(".textmenu ul li").css({ fontSize: "12px", fontWeight: "normal", height: "12px" });
		$(this).css({ fontSize: "21px", fontWeight: "bold", height: "21px" });
		/* change bgcolor */ $(".text").css({ backgroundColor: "#ff7e00", color: "#fff", textShadow: "#e16317 1px 1px 1px" });
		/* change border menu items */ $(".textdiv .text .textmenu ul li ").css({ borderBottom: "1px solid #e16317" });			
	});	
	
	/* newsletter sign up focus bit */
	

	$("#signup_form input[name=email]").focus(function() {
		$(this).css("color", "#000");
		if ($(this).val() == "Your e-mail address") {
			$(this).val("");
		}
	});
	$("#signup_form input[name=email]").blur(function() {
		$(this).css("color", "#333");
		if ($(this).val() == "") {
			$(this).val("Your e-mail address");
		}
	});	
		
	/* cat filter js */
	
	var onCol = "555"
	var offCol = "fff"
	var offBG = "111"
	var onBG = "111"
	var onBorder = "1px dotted #a39164"
	var offBorder = "0px"
	var fixMargin = "-1px" 
	var offMargin = "0px"

	$("span.sel_cat1").click(function() { 
		$(".filter span").css({ color: "#" + onCol + "" });
		$(this).css({ color: "#" + offCol + "" });
		//$(".thumb").css({ backgroundColor: "#" + offBG + "", border: offBorder, marginTop: offMargin, marginLeft: offMargin });
		$(".thumb .selcat").css({ display: "none" });
	});
	
	$("span.sel_cat2").click(function() { 
		$(".filter span").css({ color: "#" + onCol + "" });
		$(this).css({ color: "#" + offCol + "" });
		//$(".thumb").css({ backgroundColor: "#" + offBG + "", border: offBorder, marginTop: offMargin, marginLeft: offMargin });
		//$(".cat2").css({ backgroundColor: "#" + onBG + "", border: onBorder, marginTop: fixMargin, marginLeft: fixMargin });
		$(".thumb .selcat").css({ display: "block" });
		$(".cat2 .selcat").css({ display: "none" });
	});
	$("span.sel_cat3").click(function() { 
		$(".filter span").css({ color: "#" + onCol + "" });
		$(this).css({ color: "#" + offCol + "" });
		//$(".thumb").css({ backgroundColor: "#" + offBG + "", border: offBorder, marginTop: offMargin, marginLeft: offMargin });
		//$(".cat3").css({ backgroundColor: "#" + onBG + "", border: onBorder, marginTop: fixMargin, marginLeft: fixMargin });
		$(".thumb .selcat").css({ display: "block" });
		$(".cat3 .selcat").css({ display: "none" });
	});	
	$("span.sel_cat4").click(function() { 
		$(".filter span").css({ color: "#" + onCol + "" });
		$(this).css({ color: "#" + offCol + "" });
		//$(".thumb").css({ backgroundColor: "#" + offBG + "", border: offBorder, marginTop: offMargin, marginLeft: offMargin });
		//$(".cat4").css({ backgroundColor: "#" + onBG + "", border: onBorder, marginTop: fixMargin, marginLeft: fixMargin });
		$(".thumb .selcat").css({ display: "block" });
		$(".cat4 .selcat").css({ display: "none" });		
	});		
	$("span.sel_cat5").click(function() { 
		$(".filter span").css({ color: "#" + onCol + "" });
		$(this).css({ color: "#" + offCol + "" });
		//$(".thumb").css({ backgroundColor: "#" + offBG + "", border: offBorder, marginTop: offMargin, marginLeft: offMargin });
		//$(".cat5").css({ backgroundColor: "#" + onBG + "", border: onBorder, marginTop: fixMargin, marginLeft: fixMargin });
		$(".thumb .selcat").css({ display: "block" });
		$(".cat5 .selcat").css({ display: "none" });	
	});		
	$("span.sel_cat6").click(function() { 
		$(".filter span").css({ color: "#" + onCol + "" });
		$(this).css({ color: "#" + offCol + "" });
		//$(".thumb").css({ backgroundColor: "#" + offBG + "", border: offBorder, marginTop: offMargin, marginLeft: offMargin });
		//$(".cat6").css({ backgroundColor: "#" + onBG + "", border: onBorder, marginTop: fixMargin, marginLeft: fixMargin });
		$(".thumb .selcat").css({ display: "block" });
		$(".cat6 .selcat").css({ display: "none" });	
	});		
	
	openSnor();	
    
   setInterval(function() {
      if ((window.location.hash != stuffhash) || (clickedThumb == true && closedButton == true) && openingItem == false) {
      	openingItem = true;
         openSnor();
      	stuffhash = window.location.hash;
      	
      	if (clickedThumb == true && closedButton == true) {
      		closedButton = false;
      		clickedThumb = false;	
      	}
      }
   }, 100);			
	
   $("#signup_form input[type=button]").click(function () {
	  var email = $(this).parent().find("input[name=email]").val();
     
     if (email.length > 0) {
      $.post("ajax/newsletter_signup.php", {
         email: email
      }, function (data, textStatus, XMLHttpRequest) {
         if (data.showform == 0) {
            $("#signup_form").css("display", "none");
         }
         $("#newsletter_msg").html(data.message);
      }, "json");
     }  
	});
});

$(window).resize(function() {	
	snorFix();
});

function snorFix() {
	var TotalWidth = $(window).width();
	var cols = Math.floor(TotalWidth / 190);
	var boardWidth = cols * 190;
	var margin = (TotalWidth - boardWidth) / 2;
	$(".board").css({ width: boardWidth + "px" }).stop().animate({marginLeft: margin + 'px'}, 500);
	$(".filter").stop().animate({marginLeft: margin + 'px'}, 500);
	$(".filter").css({width: (boardWidth - 10) + 'px'});			   
}

function openSnor() {
	var page_url = window.location;
	var item_url = page_url.hash.substr(2);
   
	if (item_url.length > 0) {
		$(".item_url").each(function () {
			if ($(this).text() == item_url) {
				trilSnor($(this).parent().parent().find(".image"));
			}	
		});
	} else {
	    $(".item_url").each(function () {
			if ($(this).text() == "info") {
				trilSnor($(this).parent().parent().find(".image"));
			}	
		});
	}
}

function trilSnor(obj) {	
    var parent_node = $(obj).parent();
    
    if ($(parent_node).hasClass("textdiv")) { 
        // achtergrond + colors infoveld -> alles terugzetten op eerste slide als je teruggaat!
		$(parent_node).find(".text").css({ backgroundColor: "#efefef", color: "#333", textShadow: "#e5e4e4 1px 1px 1px", backgroundImage: "url('images/logo.png')" });
		$(parent_node).find(".text .textmenu ul li ").css({ borderBottom: "1px solid #ccc" });			
		$(parent_node).find(".subcontent").css({ display: "none" });
		$(parent_node).find(".text .content").css({ display: "block" });
		$(parent_node).find(".textmenu ul li").css({ fontSize: "12px", fontWeight: "normal", height: "12px" });
		$(parent_node).find("li.first").css({ fontSize: "21px", fontWeight: "bold", height: "21px" });		
     } 
     
    $('.cycle').css({ display: "none"}).cycle('stop'); //fade out cycle
 
    //$(".thumb .image").fadeIn(500); // alle andere thumbnails blijven laten zien
	$(obj).fadeOut(1); //fadeout thumbnail
	
	$(".thumb").each(function () {
	    if ($(this).innerWidth() > 190) {
			verstopSnor($(this).find(".image"));
        }
	});
	
	$(parent_node).css({
		backgroundPosition: "50% 50%"	
	});
	
	$(".thumb .close").css({ display: "none" });
	
	
    if (!$(parent_node).hasClass("textdiv")) { 	
	    $(parent_node).delay(0).css({width: '750px', height: '560px', opacity: '1.0'}) // 1hoog=190 - 2hoog=370 - 3hoog=560 - 4hoog=750
    } else {
        $(parent_node).delay(0).css({width: '560px', height: '370px', opacity: '1.0'}) // 1hoog=190 - 2hoog=370 - 3hoog=560 - 4hoog=750
    }
    $('.board').masonry({ columnWidth: 190, itemSelector: '.thumb, .extra, .extra-still', animate: true });
	
	object_tmp = $(obj);
	
	var contentCheck = $(parent_node).find(".descr").text();
    
    var item_url = $(parent_node).find(".item_url").text();
	
	
	if (contentCheck.length == 0) {
		var item_url = $(obj).parent().find(".item_url").text();
		$.post("ajax/getSnor.php", {
			url: item_url	
		}, function (data) {
			var vartitle = data.item.title;
			var vardescription = data.item.description;
			var varimages = data.item.images;
			
			$(object_tmp).parent().find(".title h2").text(vartitle);
			$(object_tmp).parent().find(".descr").html(vardescription);
			var image_container = $(object_tmp).parent().find(".cycle");
			
			for (var i = 0; i < varimages.length; i++) {
				$("<img src='" + varimages[i] + "' alt='' />").appendTo(image_container);
			}
			
			images_preloaded = 0;
			images_to_preload = varimages.length;
			
			$(image_container).find("img").load(function () {
				images_preloaded++;
				
				if (images_preloaded == images_to_preload) {
					setTimeout("kriebelSnor(object_tmp)", 100);
				}
				
			});
		}, "json");
	} else {
		kriebelSnor(obj);
	}
}

function kriebelSnor(obj) {
    $(obj).parent().find('.close').fadeIn(200);
    
    $(".info").fadeOut(0);
    $(obj).parent().find('.info').fadeIn(200, function () {
      openingItem = false;
    });
    
    $(".cycle").fadeOut(0);
    $(obj).parent().find('.cycle').delay(1000).fadeIn(200, function(){
      plaatsSnor(obj);
    });		
	
    $(obj).parent().find('.cycle').cycle({ 
       fx:     'scrollHorz', 
       prev:   '.prev', 
       next:   '.next', 
	   speed: '100',
   	   after: snorSlideTeller,
       timeout: 0
    });	// start die cycle!

    // text div stuff
    $('.text').css({ display: "none" });
    $(obj).parent().find('.text').fadeIn(0);
    // /text div stuff
    
    //thumb hover
    $(".thumb").hover(function() {					
    	//$(this).css({ opacity: "1" });
    } , function() { 
    	//$(this).css({ opacity: "0.5" });
    });		
    
    //thumb hover die on is
	$(".thumb").css({ zIndex: 5 }); // uit uitgecommente stuk hieronder

	/* temp uit
	
    $(".thumb").css({ opacity: 0.5, zIndex: 5 }).hover(function() {					
    	$(this).css({ opacity: "1" });
    } , function() { 
    	$(this).css({ opacity: "0.5" });
    });	*/
    $(obj).parent().css({ opacity: 1, zIndex: 6 }).hover(function() {					
    	$(this).css({ opacity: "1" });
    } , function() { 
    	$(this).css({ opacity: "1" });
    });	 
}

function plaatsSnor(obj) {
   var offsetObject = $(obj).parent().offset();
   var offsetTop = offsetObject.top - 70;
   $(window).scrollTop(offsetTop);
}

function snorSlideTeller(curr,next,opts) {
	var nummertje = ' image ' + (opts.currSlide + 1) + ' of ' + opts.slideCount;
	$('.teller').html(nummertje);
}

function verstopSnor(obj) {
    $(obj).parent().css({
    	backgroundPosition: "-50% -50%"	
    });		
    
    // text div stuff
    $(obj).parent().find('.text').css({ display: "none" });
    // /text div stuff					
    
    $(obj).parent().find('.info').css({ display: "none" }); //fade out info
    $('.cycle').css({ display: "none"}); //fade out cycle
    $('.cycle').cycle('stop'); // stop die cycle!
    
    $(".thumb").css({width: '180px', height: '180px', opacity: '1.0'});
    $(obj).parent('.thumb').delay(0).css({width: '180px', height: '180px'});
    
    $(obj).fadeOut(200);
    $(obj).parent().find('.image').delay(300).fadeIn(500) //fade back in thumbnail
    
    //thumb hover
    $(".thumb").hover(function() {					
    	//$(this).css({ opacity: "0.5" });
    } , function() { 
    	//$(this).css({ opacity: "1" });
    });	
}