// gebruik $j als jquery variabele zodat deze niet conflicteerd met de scripts uit de smartsite formulieren generator
var $j = jQuery.noConflict();  

$j(document).ready(function(){

   	// IE6 png-fix
   	$j('.png').ifixpng(); 
   
   	// tabel met wisselende rijkleur (class=rijentabel)
   	$j('table.rijentabel tr:odd').addClass('alt');
   	// tabel met wisselende kolomkleur (class=kolommentabel)
  	 $j('table.kolommentabel tr').find('td:even').addClass('alt');

   	// aanpassen input-elementen
   	$j('#content input[type="text"]').addClass('field');
   	$j('#content input[type="password"]').addClass('field');
   	$j('#content input[type="file"]').addClass('field');
   	$j('#content textarea').addClass('field');
   	$j('#content input[type="submit"]').addClass('button');
   	$j('#content input[type="cancel"]').addClass('button');
   	$j('#content input[type="button"]').addClass('button');
   	$j('#content input[type="reset"]').addClass('button'); 

//Examples of how to assign the ColorBox event to elements
	$j("a[rel='example1']").colorbox();
	$j("a[rel='example2']").colorbox({transition:"fade"});
	$j("a[rel='example3']").colorbox({transition:"none", width:"960px", slideshow:true, slideshowAuto:false, opacity:"0.7"});
	$j("a[rel='example4']").colorbox({slideshow:true});
	$j(".single").colorbox({}, function(){
		alert('Howdy, this is an example callback.');
	});
	$j(".colorbox").colorbox();
	$j(".youtube").colorbox({iframe:true, width:650, height:550});
	$j(".iframe").colorbox({width:"80%", height:"80%", iframe:true});
	$j(".inline").colorbox({width:"50%", inline:true, href:"#inline_example1"});
				
//Example of preserving a JavaScript event for inline calls.
	$j("#click").click(function(){ 
	$j('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
		return false;
	});

	// uitklapmenu

	$j('#menu>ol li').hover(function(){
		$j('ol', this).slideDown(200).parent().parent().addClass('open');
		$j('.flash').hide();
		$j('.altflash').show();
   },function(){
      $j('ol', this).stop().hide().attr('style','').parent().parent().removeClass('open');$j('.flash').show();$j('.altflash').hide();
   });
	
	// Taboverzicht voor Producten en Projecten
	var tabobject =$j('#tabscontainer');
	$j('h2.tabtitle',tabobject).hide();  // Verberg de titel als deze niet zichtbaar hoeft te zijn
	$j('.tabcontent:gt(0)',tabobject).hide();  // Verberg alles behalve de eerste tab
	$j('a.tablink',tabobject).click(function(){  // Klik op tabs
		var ID = $j(this).attr('href');
		$j('#tabs li.active',tabobject).removeClass('active');
		$j('#tabs a.tablink:[href^='+ID+']',tabobject).blur().parent().addClass('active')
		$j('.tabcontent',tabobject).hide().filter(ID).show();
		return false;
	});
	$j('#tabs ul li:eq(0) a',tabobject).trigger('click').show();  // eerste tab active

});   

// maak de hoogte gelijk van x elementen binnen wrapper
function equalheight(wrapper,element,x){
   $j(element, wrapper).height(''); // reset
   var rij = Math.ceil($j(element, wrapper).length/x); //aantal rijen
   for(i=0;i<rij;i++){ // per rij
      var hoogte = 0;
      var j = i*x;
      for(a=j;a<j+x;a++){ // per x items
         var hoogteN = $j(element+':eq('+a+')', wrapper).height();
         if (hoogteN > hoogte){hoogte = hoogteN;};
      };
      $j(element, wrapper).slice(j,a).height(hoogte);
   };
};

var $j = jQuery.noConflict();  
$j(document).ready(function(){

   if($j('#triggers .triggerblock').length){
      equalheight('#triggers .triggerblock','.blockcontent',4);  	// maak gelijke hoogtes voor tekstblokken
      equalheight('#triggers .triggerblock','h2',4);        		// maak gelijke hoogtes voor titels
   }
   if($j('#overview1 .item').length){
      equalheight('#overview1','.blockcontent',4);  	// maak gelijke hoogtes voor tekstblokken
      equalheight('#overview1','h2',4);        		// maak gelijke hoogtes voor titels
   }
   if($j('#overview2 .item').length){
      equalheight('#overview2','.blockcontent',4);  	// maak gelijke hoogtes voor tekstblokken
      equalheight('#overview2','h2',4);        		// maak gelijke hoogtes voor titels
   }
   if($j('#maintext .item').length){
      equalheight('#itemsoverview','.blockcontent',4);  	// maak gelijke hoogtes voor tekstblokken
      equalheight('#itemsoverview','h2',4);        	// maak gelijke hoogtes voor titels
   }
   if($j('#maintext-wide .item').length){
      equalheight('#itemsoverview','.blockcontent',4);  	// maak gelijke hoogtes voor tekstblokken
      equalheight('#itemsoverview','h2',4);        	// maak gelijke hoogtes voor titels
   }
   if($j('#productoverview').length){
      equalheight('#productinfodiv','h3',4);  		// maak gelijke hoogtes voor titels
      equalheight('#productinfodiv','.blockcontent',4);  	// maak gelijke hoogtes voor tekstblokken
      equalheight('#extraprojectinfo','h3',4);  	                // maak gelijke hoogtes voor titels
      equalheight('#extraprojectinfo','.blockcontent',4);   // maak gelijke hoogtes voor tekstblokken
   }

// jQuery SimpleShow Plugin
	var show = $j("#simpleshow").simpleshow({ speed:10000, fadeSpeed:2500, pagination:'#pagination' });
	show.start();
		
	// Here we add some click listeners using some very basic jQuery for our 4 buttons
	$j("#pause").click(function(){
		show.pause();
	});
	$j("#play").click(function(){
		show.start();
	});
	$j("#prev").click(function(){
		show.prev();
	});
	$j("#next").click(function(){
		show.next();
	});
	$j("#pagination .goto").click(function(){
		show.goTo($j(this).attr('href'));
		return false;
	});
// end jQuery SimpleShow Plugin

	  // Voeg class LAST toe in lijsten
	$j('ul.readmorelist li:last').addClass('last');
	$j('#productinfo ul.readmorelist li:last').addClass('last');


	//Product en Project Gallery Add-on
	//var temp = $j("#c27BigImage").attr("src");
	//$j("#ColorboxImage").attr("href") = temp;
	//$j("#ColorboxImage").attr("href") = $j("#c27BigImage").attr("src");


});

// Standard JavaScript Functions

// Product Images 
function SwitchImage(imageurl, imageToChange, clickedImage) {
    var bigImage = document.getElementById(imageToChange);
    if(!bigImage) return;

    bigImage.src = imageurl;
	bigImage.setAttribute("alt", clickedImage.getAttribute("alt"));

	if(!clickedImage) return;
	var e = clickedImage.parentNode;
	if(!e) return;
	e=e.parentNode;
	if(!e) return;
	var f = e.getElementsByTagName("img");
	for(var i=0; i<f.length; i++){
		if(f[i]==clickedImage)
			f[i].className = "selected";
		else
			f[i].className = "";
	}
	e=e.parentNode.parentNode;
	if(e.className=="c28") {
		var text = clickedImage.parentNode.childNodes[1].innerHTML;
		e.getElementsByTagName("p").item(0).innerHTML = text;
	}
}

	// Clear input van snelzoeken
		function clear_input(obj,type,def) {
			if (type=="onfocus") {
				if (obj.value==def) obj.value = '';
			} else {
				if (obj.value=='') obj.value = def;
			}
		}		
		var isClicked = false
		function cleartext() {
			if (!isClicked)	{
				document.forms['form'].elements['search'].value=''
				isClicked=true
			}
		}


// popscript voor productitems

		function PopUp(url)
		{
			l = (screen.availWidth - 300) / 2;
			t = (screen.availHeight - 300) / 2;
			features = "width=300,height=300,left="+l+",top="+t+",screenX="+l+",screenY="+t+",toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes";
			reWin=window.open(url,'name', features)
			reWin.focus();
		}

// colorbox

var $j = jQuery.noConflict();  
$j(document).ready(function(){

    $j(".kleinimage").click(function () { //klikken op de kleine image
	//vergroot plaatje
	SwitchImage(this.id + '?hid=img;mxw=552;mxh=378;q=100','c27BigImage', this);

	//voeg loepzwart toe
	var path=(this).id;
	var titel=$j(this).attr("title");

	//$('#bigpicture').html("<a href='" + path + "' rel='example1'><img src='" + path + "'?hid=img;mxw=552;mxh=378;q=100;' id='c27BigImage' alt='eerste afbeelding tonen' /><div  id='loepzwart'><img src='[urlprefix]2009-design/images/loep-zwart.gif' alt='Klik hier voor grotere afbeelding'  /></div></a>");
	// vervang de image en titel
	//$j("#ColorboxImage").attr('href', path );
	//$j("#ColorboxImage").attr('title', titel );
    });
});


// Events uitklappen

$j(document).ready(function(){
  $j('.evenement div').hide();

   $j('.evenement h5').click(function(){
    var x=$j(this).parent().attr('id');
   $j('#'+x+' .gegevens').slideToggle(200); 
   });
   
});