(function($) {
    
    $.fn.PhotoBrowser = function(images, detailLink) {
    
        this.each(function() {
            
            // set active image
            activeImage = 0;
            
            var PhotoBig = $('.PhotoBig', this); 
            obj = $(this);  
            DisplayInfoBlock();
            
            
            $('#PreviewNavLeft', this).click(function () { 
                MovePreviousImage();
                ChangeImage();
            });
            $('#PreviewNavRight', this).click(function () { 
                MoveNextImage();
                this.vare=0;
                ChangeImage();
            });
            
            function MovePreviousImage()
            {
                if(activeImage <= 0)
                {
                    activeImage = images.length - 1;
                }
                else
                {
                    activeImage -= 1;
                }
            }
            function MoveNextImage()
            {
                if(activeImage >= images.length - 1)
                {
                    activeImage = 0;
                }
                else
                {
                    activeImage += 1;
                }
            }
            
            function ChangeImage()
            {
                PhotoBig.attr("src", images[activeImage]);
                DisplayInfoBlock();
            }
            
            function DisplayInfoBlock()
            {
                $(".PhotoInformationBox", obj).remove();
                obj.append(  
                    '<div class="PhotoInformationBox png_bg">' +
                    '<span>Sahara Collection ' + (activeImage + 1) + '/' + images.length + '</span>' +
                    '<a href="' + detailLink + '">klik voor meer informatie</a>' +
                    '</div>'
                );  
            }
            
        });
    
    };
    
    
    // .. old
	var map=new Array();
	$.Watermark = {
		ShowAll:function(){
			for (var i=0;i<map.length;i++){
				if(map[i].obj.val()==""){
					map[i].obj.val(map[i].text);					
					map[i].obj.css("color",map[i].WatermarkColor);
				}else{
				    map[i].obj.css("color",map[i].DefaultColor);
				}
			}
		},
		HideAll:function(){
			for (var i=0;i<map.length;i++){
				if(map[i].obj.val()==map[i].text)
					map[i].obj.val("");					
			}
		}
	}
	
	$.fn.Watermark = function(text,color) {
		if(!color)
			color="#949799";
		return this.each(
			function(){		
				var input=$(this);
				var defaultColor=input.css("color");
				map[map.length]={text:text,obj:input,DefaultColor:defaultColor,WatermarkColor:color};
				function clearMessage(){
					if(input.val()==text)
						input.val("");
					input.css("color",defaultColor);
				}

				function insertMessage(){
					if(input.val().length==0 || input.val()==text){
						input.val(text);
						input.css("color",color);	
					}else
						input.css("color",defaultColor);				
				}

				input.focus(clearMessage);
				input.blur(insertMessage);								
				input.change(insertMessage);
				
				insertMessage();
			}
		);
	};
})(jQuery);