/*** VERANDER STIJL HOVER FUNCTIE ***/

$(document).ready(function() {
  // hover functie
  $('#theme-switch li').hover(function() {
    $(this).parent().append($("<div class='theme-switch'>verander stijl</div>"));
  }, function() {
	$(this).parent().find('div').remove();
  });
  // klik functie
  $('#theme-switch a').styleSwitch();
});

/*** STYLE SWITCH FUNCTIE ***/

// Style Switch functie
jQuery.fn.styleSwitch = function() {
  // als er op een link is gedrukt
  $(this).click(function() {
    // de functie loadStyleSheet aanroepen 
    loadStyleSheet(this);
    // en disable vervolgens
    return false;
  });
  function loadStyleSheet(obj) {
	// voeg een nieuwe div toe in de html
	$('body').append('<div id="overlay" />');
	// geef de nieuwe div css-eigenschappen
	$('#overlay')
	  .css({
		display: 'none',
		position: 'absolute',
		top:0,
		left: 0,
		width: '100%',
		height: '100%',
		zIndex: 1000,
		background: 'black url(Images/Overig/loading.gif) no-repeat center'
	  })
	  // de overlay infaden
	  .fadeIn(500,function() {
		// als de fade-in afgelopen is
		// request php script met de 'js' query string
		$.get(obj.href+'&js',function(data) {
		  // selecteer de css-links in de header en update de href attribute
		  $('#stylesheet-normal').attr('href','CSS/v' + data + '/layout.css');
		  $('#stylesheet-menu').attr('href','CSS/v' + data + '/menu.css');
		  $('#stylesheet-ie6').attr('href','CSS/v' + data + '/layout-ie6.css');
		  $('#stylesheet-ie7').attr('href','CSS/v' + data + '/layout-ie7.css');
		  // controleer of de nieuwe layouts zijn geladen
		  cssDummy.check(function() {
			// als de stylesheets geladen zijn, de overlay outfaden en vervolgens verwijderen
			$('#overlay').fadeOut(500,function() {
			  $(this).remove();
			});
		  });
		});
	});
  }
  var cssDummy = {
	init: function() {
	  // voeg een dummy div toe, zodat er gecontroleerd kan worden
	  $('<div id="dummy" style="display:none" />').appendTo('body');
	},
	check: function(callback) {
	  // controleer of de breedte overeenkomt met de in de css opgegeven breedte (2px)
	  if ($('#dummy').width()==2) {
	    callback();
	  // als de css nog niet geladen is, dan het proces herhalen totdat de css wel geladen is
	  } else {
	    setTimeout(function() { cssDummy.check(callback) }, 200)
	  };
	}
  }
  // controle initiëren
  cssDummy.init();
}