$(document).ready(function() {

//Shadowbox.init();

var t;
var geladen = 0;
var area;
var duur_f = 350;
var duur_nf = 250;

  if(typeof sIFR == "function"){
	//sIFR.replaceElement(named({sSelector:".kop-content", sFlashSrc:"/img/stijlen/coolsville.swf", sColor:"#b9004d", nPaddingTop:0, nPaddingBottom:0, sFlashVars:"textalign=left&offsetTop=0"}));
  };

  $("img[@src$=ribbon-nog-enkele-woningen-te-koop-home.png], #ribbon-home").ifixpng();
  $("img[@src$=ribbon-nog-enkele-woningen-te-koop.png], #ribbon-nog-enkele-woningen-te-koop").ifixpng();
  $("img[@src$=ribbon-binnenkort-in-verkoop.png], #ribbon-binnenkort-in-verkoop").ifixpng();
  $("img[@src$=ribbon-in-ontwikkeling.png], #ribbon-in-ontwikkeling").ifixpng();
  $("img[@src$=logo-nieuwbouwdag.png], #banner-home").ifixpng();
  $("img[@src$=inzet-vogelvlucht.png], #inzet-vogelvlucht").ifixpng();  

  var sb = document.body.clientWidth;	
  var cbrh = 483; //containerbreedte ribbon home
  var cbbh = 800; //containerbreedte banner home
  var max_breedte = 1260;
  var blijft_over = parseInt((sb - max_breedte) / 2);
  
  if (sb > max_breedte) {
	  
    sb = max_breedte + blijft_over;

  }
    
  var links_rh = (sb - cbrh);
  var links_bh = ( ( document.body.clientWidth - cbbh ) / 2 );
  
  $("#ribbon-home").css( { position: "absolute", background: "transparent url('img/stijlen/ribbon-nog-enkele-woningen-te-koop-home.png') 100% 0 no-repeat", zIndex: "101", width: "482px", height: "283px", left: links_rh + "px", marginTop: "335px" } );		  	  
  $("#banner-home").css( { position: "absolute", zIndex: "101", width: cbbh + "px", height: "283px", left: links_bh + "px", marginTop: "335px" } );

  //$(".groenoord-blok").click(function() {
  $(".groenoord-blok").mouseover(function() {
									  
	//var sid = $(this).attr("sid");
	//location.href="index.asp?id=4&sid=" + sid;
	var blok = $(this).attr("sid");	
	uspLaden(blok);	
	return false;
	  
  });

  $(".groenoord-blok").mouseover(function() {
	
		if (geladen == 0) {  
		  clearTimeout(t);

	      area = $(this).attr("id");
	      var blok = "vogelvlucht-" + area;
	      $("#beeld-vogelvlucht").attr( { src: "img/vv/" + blok + "-1010.jpg" } );
		  geladen = 1;
		}
	  
  });
  
  $(".groenoord-blok").mouseout(function() {

    //t = window.setTimeout(function() {
	  $("#beeld-vogelvlucht").attr( { src: "img/vv/vogelvlucht-uitgangspositie-1010.jpg" } );
	  geladen = 0;
    //}, 20);
	
  });

  $(".beeld-sloop").mouseover(function() {
	$(this).css( { cursor: "pointer" } );								   
  });

  $(".beeld-sloop").click(function() {							   
    var beeld = $(this).attr("ref");
    beeldLaden(beeld);
  });


  $(".thumb-woningen-blok").mouseover(function() {
    $(this).css( { cursor: "pointer" } );
  });

  $(".thumb-woningen-blok").click(function() {
	var beeld = "img/" + $(this).attr("id") + ".jpg";
	//var beeld = "img/beeld-blok2-2.jpg";
	//var beeld = "<img id='beeld-woning' alt='Klik om te sluiten' src='" + b +"' />";
	var sb = document.body.clientWidth;	
	var pb = 995;
	var cbbw = 995; //containerbreedte beeld woning
	var links = (sb - pb) / 2;
	var links_pg = (sb - cbbw) /2;
		
	$(".ribbon").css( { display: "none" } );	
	$("#container-content").after("<img id='beeld-woning' alt='Klik om te sluiten' src='" + beeld +"' />");
	$("#beeld-woning").css( { 
	  position: "absolute",
	  zIndex: "1001",
	  width: "995px",
	  height: "665px",
	  left: links + "px",
	  top: "50px",
	  margin: "0"
	} );

    $("#beeld-woning").mouseover(function() {
	  $(this).css( { cursor: "pointer" } );
	  $(this).attr( { title: "Klik om de impressie te sluiten." } )
	});


    $("#beeld-woning").click(function() {
	  $("#beeld-woning").remove();
	});
	
  });

  $("#link-wethouder, #link-financieel, #link-profiteer, #link-locatiekaart, #link-impressies, #link-pg-blok2, #link-sloop").click(function() {
	var sb = document.body.clientWidth;	
	var pb = 995;
	var cbpg = 650; //containerbreedte plattegronden
	var links = (sb - pb) / 2;
	var links_pg = (sb - cbpg) /2;
		
	$("#popup-container").css( { 
	  //display: "block",
	  position: "absolute",
	  zIndex: "1000",
	  width: "737px", //was eerst 735
	  height: "426px",
	  left: links + "px",
      margin: "10px 0 0 0",
	  background: "#fff"
	} );
	
	$("#popup-container").fadeIn("fast");
		
	if ($(this).attr("id") == "link-wethouder" ) {
      tekstLaden("includes/wethouder.htm");
    }
    else if ($(this).attr("id") == "link-profiteer" ) {
      tekstLaden("includes/profiteer.htm");
    }
    else if ($(this).attr("id") == "link-sloop" ) {
      tekstLaden("includes/beelden-sloop.asp");
    }		
	else if ($(this).attr("id") == "link-financieel" ) {
      tekstLaden("includes/financieel.htm");
    }	
    else if ($(this).attr("id") == "link-locatiekaart" ) {
	  $("#popup-container").css( { background: "#fff url('img/locatiekaart.jpg') 50% 50% no-repeat" } );
	}
	else if ($(this).attr("id") == "link-impressies" ) {
	  tekstLaden("includes/impressies.htm");
    }
	else if ($(this).attr("id") == "link-pg-blok2" ) {
	  $(".container-woningen-blok").css( { left: links + "px" } );
	  $(".ribbon").css( { left: links + "px" } );	  
	  $("#popup-container").css( { background: "transparent url('img/stijlen/bg-popup-pg.png') 0 10px no-repeat", zIndex: "10001", width: "620px", height: "620px", left: links_pg + "px", marginTop: "-50px" } );		  	  
	  $("img[@src$=bg-popup-pg.png], #popup-container").ifixpng(); 
	  tekstLaden("includes/pg-blok2.htm");
    }


  });

  $("#popup-container").mouseover(function() {
    $(this).css( { cursor: "pointer" } );
	$(this).attr( {title: "Klik om terug te gaan" } );
  });

  $("#popup-container").click(function() {
	$(this).fadeOut("fast");
	//$(".ribbon").fadeIn("fast");
	$(".ribbon").css( { display: "block" } );	
  });

  $("#container-popuphome").css( { display: "none" } );

  $("#toon-container-popuphome").click(function() {
	$("#container-popuphome").fadeIn("fast");
	$("#banner-home").css( { display: "none" } );
	return false;
  });

  $("#sluit-container-popuphome").click(function() {
	$("#container-popuphome").fadeOut("fast");
	$("#banner-home").css( { display: "block" } );	
	return false;
  });

  $(".groenoord-hotspot").click(function() {
    return false;											 
  });

  $("#link-gegevens-achterlaten").click(function() {
    window.open('http://www.ymere.nl/projectinschrijvingen/?id=151','inschrijven','scrollbars=yes,width=810,height=700');
	return false;
  });

  $("#link-disclaimer").click(function() {
    window.open('/disclaimer.html','inschrijven','scrollbars=yes,width=400,height=300');
	return false;
  });

  $("#img-locatiekaart").mouseover(function() {
    $(this).css( { cursor: "pointer" } );										
  });

  $("#img-locatiekaart").click(function() {
										
	var huidige_afbeelding = $("#img-sfeerbeeld").attr("src");
	if (huidige_afbeelding.indexOf("-groot") == -1) {
      $("#img-sfeerbeeld").attr( { src: "/img/locatiekaart-groot.gif" } );
	  $("#img-locatiekaart").attr( { src: "/img/beeld-welkom-klein.jpg" } );
	}
	else {
      $("#img-sfeerbeeld").attr( { src: "/img/beeld-welkom.jpg" } );
	  $("#img-locatiekaart").attr( { src: "/img/locatiekaart.gif" } );	  
	}
  });


  $(".mnu-item").mouseover(function() {
	var menu_item = $(".mnu-actief").attr("rel");
	var huidig_item = $(this).attr("rel");
	
	if (menu_item !== huidig_item) {
      $(".mnu-actief").css( { backgroundImage: "url(img/stijlen/mnu_" + menu_item + "_nf.png)" } );
	}	
	
  });


  $(".mnu-item").mouseout(function() {
	var menu_item = $(".mnu-actief").attr("rel");
    $(".mnu-actief").css( { backgroundImage: "url(img/stijlen/mnu_" + menu_item + "_f.png)" } );
	
  });


  $("#doorklik-home").click(function() {
	location.href="?id=7";								 
  });
  
  $("#doorklik-home").mouseover(function() {
	$(this).attr( { title: "13 februari 2010 - informatiedag" } );
	$(this).css({ cursor: "pointer" });								 
  });  

/*

  $(".mnu-item").mouseover(function() {
	var menu_item = $(".mnu-actief").attr("rel");
	var huidig_item = $(this).attr("rel");
	
	var wnf = $(".mnu-actief").attr("wnf");
    var wf = $(this).attr("wf");

	$(this).animate({ 
      width: wf + "px"
    }, duur_f, function() { $(this).css( { backgroundImage: "url(img/stijlen/mnu_" + huidig_item + "_f.png)" } ); } );


	if (menu_item !== huidig_item) {
	  
	  $(".mnu-actief").animate({ 
        width: wnf + "px"
      }, duur_nf );
	  
	  $(this).animate({ 
        width: wf + "px"
      }, duur_f );

      $(".mnu-actief").css( { backgroundImage: "url(img/stijlen/mnu_" + menu_item + "_nf.png)" } );

	}

  });

  $(".mnu-item").mouseout(function() {
	var menu_item = $(".mnu-actief").attr("rel");
	var huidig_item = $(this).attr("rel");
	
	var wnf = $(this).attr("wnf");
    var wf = $(".mnu-actief").attr("wf");

    $(this).css( { backgroundImage: "url(img/stijlen/mnu_" + huidig_item + "_nf.png)" } );

	if (menu_item !== huidig_item) {
      $(".mnu-actief").css( { backgroundImage: "url(img/stijlen/mnu_" + menu_item + "_f.png)" } );
	  $(".mnu-actief").animate({ width: wf + "px" }, duur_f );
	  $(this).animate({ width: wnf + "px" }, duur_nf );
	  
	}

	  $(this).animate({ width: wnf + "px" }, duur_nf );

});

*/

});



function tekstLaden(url) {
		
  $.ajax({
    type: "GET",
    url: url,
    cache: false,
    dataType: "text",
    success: function(text){
	  $("#popup-container").html(text);
	},
    error: function(){
	  $("#popup-container").html("Pagina kon niet worden geladen");
	}

  });

}


function uspLaden(blok) {
		
  var url = "includes/usp-blok" + blok + ".htm";
  		
  $.ajax({
    type: "GET",
    url: url,
    cache: false,
    dataType: "text",
    success: function(text){
	  $("#woningen-usp").html(text);
	  return false;
	},
    error: function(){
	  $("#woningen-usp").html("Pagina kon niet worden geladen");
	}

  });
  
}

function beeldLaden(teller) {
	
	var beeld = "img/sloop-groenoord/full/sloop-groenoordhallen-" + teller + ".jpg";


    Shadowbox.open({
        content:    beeld,				   
        player:     "img"
    });


}