$(document).ready(function () {
    var $currSRC;
    $("#quicklinks a img").hover(function () {
        $currSRC = $(this).attr("src");
        $currSRC = $currSRC.replace(".png", "");
        $(this).attr("src", $currSRC + "_hover.png");
    }, function () {
        $(this).attr("src", $currSRC + ".png");
    });

    $(".peiler.rr").hover(function () {
        $(".peilercontent.recenterealisatie").css("background-color", "#899127");
    }, function () {
        $(".peilercontent.recenterealisatie").css("background-color", "#aeb834");
    });

    $(".peiler.bs").hover(function () {
        $(".peilercontent.buitensignalisatie").css("background-color", "#ba511d");
    }, function () {
        $(".peilercontent.buitensignalisatie").css("background-color", "#da5f22");
    });

    $(".peiler.ab").hover(function () {
        $(".peilercontent.autobelettering").css("background-color", "#b0153d");
    }, function () {
        $(".peilercontent.autobelettering").css("background-color", "#d8194b");
    });

    $('.peiler.nieuwsberichten .nieuwsbericht').hover(function () {
        $(".nieuwsberichttekst :not(h2)", this).css({ "text-decoration": "underline" });
    }, function () {
        $(".nieuwsberichttekst :not(h2)", this).css({ "text-decoration": "none" });
    }).css({ "cursor": "pointer" }).click(function () {
        window.location = $('.nieuwsberichtdatum a:first', this).attr('href');
    }); ;

    $("#bekijkprojecten img, #bekijkprojecten .bekijkprojectentitle").hover(function () {
        $("#bekijkprojecten .bekijkprojectentitle").css({ "background-color": "#2a2a29", "color": "#f0f0f0" });
    }, function () {
        $("#bekijkprojecten .bekijkprojectentitle").css({ "background-color": "#d8194b", "color": "#f0f0f0" });
    });

    $origactive = $("#menu ul li a.active")
    $("#menu").hover(function () {
        $("#menu ul li a").removeClass('active');
    }, function () {
        $($origactive).addClass('active');
    });

    $origactive2 = $("#submenu ul li a.active")
    $("#submenu ul").hover(function () {
        $("#submenu ul li a").removeClass('active');
    }, function () {
        $($origactive2).addClass('active');
    });
});

function addBookmark(){
    if (document.all) {window.external.AddFavorite(location.href, document.title);}
    else if (window.sidebar){window.sidebar.addPanel(document.title, location.href, "");}
}
$(window).load(function () {
if ($(".product").size() > 0) {    
    grayscale($(".product img"));
    $(".product").hover(function () {
        grayscale.reset($(this, "img"));
        $(this).children(".producttitle").css({ "color": "#ffffff", "background-color": "#1f1f1e" });
    }, function () {
        grayscale($(this, "img"));
        $(this).children(".producttitle").css({ "color": "#c1bfbe", "background-color": "#2A2A29" }); ;
    });    
}
});
/*
the images preload plugin
*/
(function($) {
	$.fn.preload = function(options) {
		var opts 	= $.extend({}, $.fn.preload.defaults, options),
			o		= $.meta ? $.extend({}, opts, this.data()) : opts;
		return this.each(function() {
			var $e	= $(this),
				t	= $e.attr('rel'),
				i	= $e.attr('href'),
				l	= 0;
			$('<img/>').load(function(i){
				++l;
				if(l==2) o.onComplete();
			}).attr('src',i);	
			$('<img/>').load(function(i){
				++l;
				if(l==2) o.onComplete();
			}).attr('src',t);	
		});
	};
	$.fn.preload.defaults = {
		onComplete	: function(){return false;}
	};
})(jQuery);

$(function() {
	//some elements..
	var $ps_container		= $('#ps_container'),
		$ps_image_wrapper 	= $ps_container.find('.ps_image_wrapper'),
		$ps_next			= $ps_container.find('.ps_next'),
		$ps_prev			= $ps_container.find('.ps_prev'),
		$ps_nav				= $ps_container.find('.ps_nav'),
		$tooltip			= $ps_container.find('.ps_preview'),
		$ps_preview_wrapper = $tooltip.find('.ps_preview_wrapper'),
		$links				= $ps_nav.children('li').not($tooltip),
		total_images		= $links.length,
		currentHovered		= -1,
		current				= 0,
		$loader				= $('#loader');
	
	/*check if you are using a browser*/	
	var ie 				= false;
	if ($.browser.msie) {
		ie = true;//you are not!Anyway let's give it a try
	}
	if(!ie)
		$tooltip.css({
			opacity	: 0
		}).show();
		
		
	/*first preload images (thumbs and large images)*/
	var loaded	= 0;
	$('.ps_image_wrapper img').attr('alt', $('.ps_nav li:first').find('a').attr('title'));
	var title = $('.ps_nav li:first').find('a').attr('title');
	$('.ps_title').html(title);
	$links.each(function(i){
		var $link 	= $(this);
		$link.find('a').preload({
			onComplete	: function(){
				++loaded;
				if(loaded == total_images){
					//all images preloaded,
					//show ps_container and initialize events
					$loader.hide();
					$ps_container.show();
					//when mouse enters the pages (the dots),
					//show the tooltip,
					//when mouse leaves hide the tooltip,
					//clicking on one will display the respective image	
					$links.bind('click',showImage);
					//navigate through the images
					$ps_next.bind('click',nextImage);
					$ps_prev.bind('click',prevImage);

                    function mycarousel_initCallback(carousel) {
                        $('#scroller_next').bind('click', function() {
                            carousel.next();
                            return false;
                        });

                        $('#scroller_prev').bind('click', function() {
                            carousel.prev();
                            return false;
                        });
                    };
                    
                    $("#scrollercontainer").jcarousel({
                        scroll: 1,
                        initCallback: mycarousel_initCallback,
                        // This tells jCarousel NOT to autobuild prev/next buttons
                        buttonNextHTML: null,
                        buttonPrevHTML: null
                    });
                    
			    }
			}
		});
	});
	
	function showImage(e){
		var $link				= $(this),
			idx					= $link.index(),
			$image				= $link.find('a').attr('href'),
			$currentImage 		= $ps_image_wrapper.find('img'),
			currentImageWidth	= $currentImage.width();
		
		
		
		//if we click the current one return
		if(current == idx) return false;
		
		//add class selected to the current page / dot
		$links.eq(current).removeClass('selected');
		$link.addClass('selected');
		
		//the new image element
		var $newImage = $('<img/>').css('left',currentImageWidth + 'px')
								   .attr('src',$image).attr('alt',$link.find('a').attr('title'));
		
		//get title
		var title = $('<span/>').html($link.find('a').attr('title'));
		$('.ps_title').html(title);						  
		
		//if the wrapper has more than one image, remove oldest
		if($ps_image_wrapper.children().length > 1)
			$ps_image_wrapper.children(':last').remove();
		
		//prepend the new image
		$ps_image_wrapper.prepend($newImage);
		
		//the new image width. 
		//This will be the new width of the ps_image_wrapper
		var newImageWidth	= $newImage.width();
	
		//check animation direction
		if(current > idx){
			$newImage.css('left',-newImageWidth + 'px');
			currentImageWidth = -newImageWidth;
		}	
		current = idx;
		//animate the new width of the ps_image_wrapper 
		//(same like new image width)
		$ps_image_wrapper.stop().animate({
		    width	: newImageWidth + 'px'
		},350);
		//animate the new image in
		$newImage.stop().animate({
		    left	: '0px'
		},350);
		//animate the old image out
		$currentImage.stop().animate({
		    left	: -currentImageWidth + 'px'
		},350);
	
		e.preventDefault();
	}				
	
	function nextImage(){
		if(current < total_images){
			$links.eq(current+1).trigger('click');
		}
	}
	function prevImage(){
		if(current > 0){
			$links.eq(current-1).trigger('click');
		}
	}
});