var $nine_content;
$(document).ready(function(){
	$nine_content = $('#bounds').html();
	
	$('.social').mouseenter(function(){
		//$(this).find('img').animate({'opacity':0.2},200);									
	}).mouseleave(function(){
		//$(this).find('img').animate({'opacity':1},200);		
	})
})

$('.nblock').live('mouseenter',function(){
	var size = 180;
	var b = 15;	
	var el = $(this);
	$(this).css('z-index',999)
	el.stop(true,true).animate({'width':size, 'height':size, 'left':'-='+b, 'top':'-='+b},150)
	//$(this).find('img').stop(true,true).animate({'width':size, 'height':size, opacity:1},150)
}).live('mouseleave', function(){
	var b = 15;
	$(this).stop(true,true).animate({'width':150, 'height':150, 'left':'+='+b, 'top':'+='+b},150)
})



$('.block').live('mouseenter',function(){
	//ENTER
	var size = 180;
	var b = 15;
	var el = $(this).find('.mask');
	el.stop().animate({'opacity':0},300)
	el.css('border-color', '#333');
	$(this).addClass('add_shade')
	$(this).css('z-index',999)
	$(this).stop(true,true).animate({'width':size, 'height':size, 'left':'-='+b, 'top':'-='+b},150)
	$(this).find('img').stop(true,true).animate({'width':size, 'height':size, opacity:1},150)
	//
}).live('mouseleave',function(){
	var el = $(this).find('.mask');
	var size = 180;
	var b = 15;
	el.stop().animate({'opacity':1},300)
	el.css('border-color', '#FFF');
	$(this).removeClass('add_shade')
	$(this).css('z-index',60);
	$(this).stop(true,true).animate({'width':150, 'height':150, 'left':'+='+b, 'top':'+='+b},150)
	$(this).find('img').stop(true,true).animate({'width':150, 'height':150, opacity:0},150)
}).live('click', function(){
	var el = $(this)
	var rel = el.attr('rel')
	var loc = el.find('a').attr('href');
	window.location = loc;	
	
})


//NEWS CLICK
$('.nblock').live('click', function(){
	window.location = '/news'								
})

$('.back').live('mouseenter',function(){
	$(this).stop().animate({'left':0},200)
}).live('mouseleave', function(){
	$(this).stop().animate({'left':30},200)
}).live('click', function(){
	window.location ='/';
})

// ITEMS
$('#projects img').live('click', function(){
	var el = $(this);
	var src = el.attr('src');
	var left = el.offset().left;
	var top = el.offset().top;
	RAWBOX(src, $(this))
})

function RAWBOX(src,elem)
{
	$('.RAWBOX').remove();
	var fullsize = getFullSize(src)
	var current = elem;

	//-------------------------------
	var $close = $('<div />')
		.addClass('RAWBOX_CLOSE')
		if (navigator.appName=="Microsoft Internet Explorer")
		{
			$close.css({'width':39, 'height':39, 'position':'absolute', 'top':0, 'left':0, 'background-image':'url(/images/close.png)', 'cursor':'pointer','z-index':999});

		}else
		{
			$close.css({'width':39, 'height':39, 'position':'absolute', 'top':-15, 'left':-15, 'background-image':'url(/images/close.png)', 'cursor':'pointer','z-index':999});

		}
		
	var $next = $('<div />')
		.addClass('RAWBOX_NEXT')
		.css({'width':150, 'height':28, 'position':'absolute', 'top':0, 'right':0, 'opacity':1, 'background-image':'url(/images/arrow_next.png)', 'background-repeat':'no-repeat', 'background-position':'110px center', 'cursor':'pointer'})
		.bind('click', function(){
			var next = current.next('img');
			var fullsize = getFullSize(next.attr('src'))
			loadImage(fullsize)
			current = next;
			return false;
		})
		.bind('mouseenter', function(){
			$(this).stop().animate({'opacity':1},100);						 
		})
		.bind('mouseleave', function(){
			$(this).stop().animate({'opacity':0},100);							 
		})
		
	var $prev = $('<div />')
		.addClass('RAWBOX_PREV')
		.css({'width':150, 'height':28, 'position':'absolute', 'top':0, 'left':0, 'opacity':0, 'background-image':'url(/images/arrow_prev.png)', 'background-repeat':'no-repeat', 'background-position':'10px center', 'cursor':'pointer'})
		.bind('click', function(){
			var prev = current.prev('img');
			var fullsize = getFullSize(prev.attr('src'))
			loadImage(fullsize)
			current = prev;
			return false;
		})
		.bind('mouseenter', function(){
			$(this).stop().animate({'opacity':1},100);						 
		})
		.bind('mouseleave', function(){
			$(this).stop().animate({'opacity':0},100);							 
		})
		
	var $desc = $('<div />')
		.addClass('RAWBOX_DESC')
		.css({'width':'100%', 'height':'auto', 'position':'absolute', 'background-color':'#000', 'bottom':'0px', 'z-index':999, 'opacity':1, 'display':'none'})

	var $container = $('<div />')
		.addClass('RAWBOX')
		.css({
			'-moz-box-shadow':'0px 0px 8px #000', 
			'-webkit-box-shadow':'0px 0px 8px #000',
			'filter': 'progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=130, Color="#000000")',
			'position':'absolute', 
			'left':'50%', 
			'top':'50%' ,
			'z-index':999, 
			'opacity':0 ,
			'background-color':'#fff', 
			'background-image':'url(/images/loading.gif)', 
			'background-repeat':'no-repeat', 
			'background-position':'center center'
		})
		.append($close).append($next).append($prev).append($desc);
	$('body').prepend($container);
	
	
	loadImage(fullsize)
	function loadImage(sour)
	{
		$('.cur_img').remove();
		var image = new Image();
		var ww = $(window).width()-75;
		var wh = $(window).height()-200;
		
		image.onload = function(){
			resize(image, wh, ww);
			var w = image.width
			var h = image.height;
			var desc = current.attr('desc');
			var marleft = -(w/2);
			var martop = -(h/2);
			//Check if prev next
			if(current.next('img').length == 0){ $('.RAWBOX_NEXT').css('display','none'); }
			else{ $('.RAWBOX_NEXT').css('display','block');	}
			if(current.prev('img').length == 0){ $('.RAWBOX_PREV').css('display','none'); }
			else{ $('.RAWBOX_PREV').css('display','block'); }
			$next.height(h)
			$prev.height(h)
			if(desc != 'undefined' && desc != undefined){ $desc.html('<p>'+desc+'</p>').css('display','block') }else{ $desc.css('display','none') }
			
			//Add class to image for tracking
			$(image).addClass('cur_img')
			$(image).css({'opacity':0})
			
			//Show all
			$container.animate({'width':w, 'height':h, 'margin-left':marleft, 'margin-top':martop, 'opacity':1},200)
			$container.append(image);
			$(image).animate({'opacity':1},100)
		}
		image.src = sour;
	}
	
		
		//BIND BEHAVIOURS --------------------------//
		$('.RAWBOX_CLOSE').bind('mouseenter', function(){
			$(this).css('background-image','url(/images/closehover.png)')								   
		}).bind('mouseleave', function(){
			$(this).css('background-image','url(/images/close.png)')		
		})
		
		
		
		$('.RAWBOX_CLOSE, .RAWBOX img').bind('click', function(){
			var el = $(this).closest('.RAWBOX');
			el.animate({'width':0, 'height':0, 'margin-left':0, 'margin-top':0, 'opacity':0},200, function(){
				el.remove();
				el.unbind('mouseenter')
				el.unbind('mouseleave')
				el.unbind('click')
			})
		})
		//-----------------------------------------//

}//END RAWBOX

function resize(img, maxh, maxw) {
	var ratio = maxh/maxw;
  	if (img.height/img.width > ratio){
    	// height is the problem
    	if (img.height > maxh){
    		img.width = Math.round(img.width*(maxh/img.height));
      		img.height = maxh;
    	}
  	} else {
    	// width is the problem
    	if (img.width > maxh){
      		img.height = Math.round(img.height*(maxw/img.width));
      		img.width = maxw;
    	}	
  	} 
};

function getFullSize(src)
{
	var fullsize = src.split('.')
	var ext = '.'+fullsize[1];
		fullsize = fullsize[0].split('_');
		fullsize = fullsize[0]+'_'+fullsize[1]+ext;
	return fullsize;
}
//END RAWBOX STUFF----------------------------------------------------//

$('#project_btn').live('click', function(){
	$('#projects').find('img').first().trigger('click')						  
})

/* CONTACT FORM */
$('#contact_form').live('submit', function(event){
	event.preventDefault();
	var el = $(this);
	var bedrijf = el.find('input[name|=bedrijfsnaam]')
	var voornaam = el.find('input[name|=voornaam]')
	var achternaam = el.find('input[name|=achternaam]')
	var email = el.find('input[name|=email]')
	var telefoon = el.find('input[name|=telefoon]')
	var onderwerp = el.find('input[name|=onderwerp]')
	var bericht = el.find('textarea[name|=bericht]')
	
	//Clear all errors
	$('#contact_form').find('input, textarea').removeClass('error')
	$('#contact_form').find('.output').text('')
	
	if(voornaam.val().length < 2){ error('Geef uw voornaam op', voornaam)
	}else{ voornaam.valid = true };
	
	if(achternaam.val().length < 3){ error('Geef uw achternaam op', achternaam)
	}else{ achternaam.valid = true };
	
	if(isValidEmailAddress(email.val()) == false){ error('Vul uw email adres correct in', email)	
	}else{ email.valid = true };
	
	if(IsNumeric(telefoon.val()) == false){ error('Vul uw telefoon nummer in', telefoon);	
	}else{ telefoon.valid = true };
	
	if(bericht.val() < 5){ error('Vul uw bericht in', bericht);
	}else{ bericht.valid = true };
	
	if(voornaam.valid && achternaam.valid && email.valid && telefoon.valid && bericht.valid)
	{
		$.post('/send.php', {'bedrijf':bedrijf.val(), 'voornaam':voornaam.val(), 'achternaam':achternaam.val(), 'email':email.val(), 'telefoon':telefoon.val(), 'onderwerp':onderwerp.val(), 'bericht':bericht.val()}, function(data){
			$('.formok').text('Bedankt, U hoort zo spoedig mogelijk van ons.')
			bedrijf.val('')
			voornaam.val('')
			achternaam.val('')
			email.val('');
			telefoon.val('');
			onderwerp.val('');
			bericht.val('');																																																					
		})
		
	}

})

function error(str, element)
{
	var par = element.closest('tr')
	//var output = par.find('.output')
	par.find('textarea').addClass('error')
	par.find('input').addClass('error')
	
	//output.text(str);
}

function isValidEmailAddress(emailAddress) {
	var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
	return pattern.test(emailAddress);
}

function IsNumeric(strString){
   var strValidChars = "0123456789.-";
   var strChar;
   var blnResult = true;
   var strString = strString.split(' ').join('');
   if (strString.length == 0) return false;
   if (strString.length < 10) return false;
   if (strString.length > 10) return false;

   //  test strString consists of valid characters listed above
   for (i = 0; i < strString.length && blnResult == true; i++)
      {
      strChar = strString.charAt(i);
      if (strValidChars.indexOf(strChar) == -1)
         {
         blnResult = false;
         }
      }
   return blnResult;
   }