function WebsiteDisplay()
{
	this.websites = Array();
	this.overlayElement = null;
	this.displayElement = null;
	this.titleBar = null;
	this.iframe = null;
	this.scrollHolder = null;
	this.scrollLeft = null;
	this.scrollArea = null;
	this.scrollRight = null;
	this.closeButton = null;
	this.currentLeft = 0;

	this.add = function(title,url,image,groupImage,allowOpenLink,isRural){
		this.websites[this.websites.length] = Array(title,url,image,groupImage,null,allowOpenLink,isRural);
	}

	this.setup = function(){

		this.overlayElement = new Element("div");
		this.overlayElement.addClass("websitedisplayoverlay");
		this.overlayElement.setStyle("display","none");
		this.overlayElement.inject(document.body);
		this.overlayElement.instance = this;
		this.overlayElement.addEvent("click",function(){
			this.instance.close();
		});

		this.displayElement = new Element("div");
		this.displayElement.addClass("websitedisplay");
		this.displayElement.setStyle("display","none");
		this.displayElement.inject(document.body);

		this.titleBar = new Element("div");
		this.titleBar.addClass("titlebar");
		this.titleBar.inject(this.displayElement);

		this.title = new Element("a");
		this.title.innerHTML = "Title bar";
		this.title.href = "#";
		this.title.setAttribute("target","_blank");
		this.title.inject(this.titleBar);

		this.iframe = new Element("iframe");
		this.iframe.src = "";
		this.iframe.setAttribute("frameBorder",0);
		this.iframe.setAttribute("border",0);
		this.iframe.setAttribute("borderWidth",0);
		this.iframe.inject(this.displayElement);

		this.scrollHolder = new Element("div");
		this.scrollHolder.addClass("scrollholder");
		this.scrollHolder.inject(this.displayElement);

		this.scrollLeft = new Element("div");
		this.scrollLeft.addClass("scrollleft");
		this.scrollLeft.inject(this.scrollHolder);
		this.scrollLeft.instance = this;
		this.scrollLeft.addEvent("click",function(){
			this.instance.scrollToLeft();
		});

		this.scrollAreaHolder = new Element("div");
		this.scrollAreaHolder.addClass("scrollareaholder");
		this.scrollAreaHolder.inject(this.scrollHolder);

		this.scrollArea = new Element("dl");
		this.scrollArea.setStyle("width",this.websites.length*161);
		this.scrollArea.inject(this.scrollAreaHolder);
		this.scrollArea.fx = new Fx.Tween(this.scrollArea);

		for( var i = 0; i < this.websites.length; i++ )
		{
			this.websites[i][4] = new Element("dd");
			this.websites[i][4].instance = this;
			this.websites[i][4].websiteIndex = i;
			this.websites[i][4].addEvent("click",function(){
				this.instance.open(this.websiteIndex);
			});

			if( i == this.websites.length-1 )
			{
				this.websites[i][4].addClass("last");
			}

			var image = new Element("img");
			image.addClass("image");
			image.src = this.websites[i][2];
			image.inject(this.websites[i][4]);

			var groupImage = new Element("img");
			groupImage.addClass("groupimage");
			groupImage.src = this.websites[i][3];
			groupImage.inject(this.websites[i][4]);

			if( this.websites[i][6] == true )
			{
				var groupRuralImage = new Element("img");
				groupRuralImage.addClass("groupruralimage");
				groupRuralImage.src = "/img/grouprural/near.png";
				groupRuralImage.inject(this.websites[i][4]);
			}

			var title = new Element("div");
			title.addClass("title");
			title.innerHTML = this.websites[i][0];
			title.inject(this.websites[i][4]);

			if( this.websites[i][1].length >= 11 )
			{
				this.websites[i][4].inject(this.scrollArea);
			}
		}

		this.scrollRight = new Element("div");
		this.scrollRight.addClass("scrollright");
		this.scrollRight.inject(this.scrollHolder);
		this.scrollRight.instance = this;
		this.scrollRight.addEvent("click",function(){
			this.instance.scrollToRight();
		});

		this.closeButton = new Element("div");
		this.closeButton.addClass("close");
		this.closeButton.inject(this.displayElement);
		this.closeButton.instance = this;
		this.closeButton.addEvent("click",function(){
			this.instance.close();
		});

		if( this.websites.length <= 1 )
		{
			this.scrollHolder.setStyle("display","none");
		}
	}

	this.scrollToLeft = function(){
		if( this.currentLeft+161 <= 0 )
		{
			this.currentLeft += 161;
			this.scrollArea.fx.start('left',this.currentLeft);
			this.updateScollArrows();
		}
	}

	this.scrollToRight = function(){
		if( this.currentLeft > -(this.scrollArea.getWidth()-this.scrollHolder.getWidth()) )
		{
			this.currentLeft -= 161;
			this.scrollArea.fx.start('left',this.currentLeft);
			this.updateScollArrows();
		}
	}

	this.updateScollArrows = function(){
		if( this.currentLeft >= 0 )
		{
			this.scrollLeft.addClass("disabled");
		}
		else
		{
			this.scrollLeft.removeClass("disabled");
		}
		if( this.currentLeft > -(this.scrollArea.getWidth()-this.scrollHolder.getWidth()) )
		{
			this.scrollRight.removeClass("disabled");
		}
		else
		{
			this.scrollRight.addClass("disabled");
		}
		
	}

	this.open = function(index,width,height){

		if( this.websites[index] == null )
		{
            alert("WebsiteDisplay::open(): Index " + index + " not set.");
			return false;
		}

		if( this.websites[index][5] == false )
		{
			// Mag link niet extern openen
			this.title.href = "#";
			this.title.addClass("nolink");
			this.title.setAttribute("target","");
		}
		else
		{
			// Mag link wel extern openen
			this.title.href = this.websites[index][1];
			this.title.removeClass("nolink");
			this.title.setAttribute("target","_blank");
		}
		this.title.innerHTML = this.websites[index][0];
		
		this.iframe.src = this.websites[index][1];

		for( var i = 0; i < this.websites.length; i++ )
		{
			this.websites[i][4].removeClass("active");
		}

		this.websites[index][4].addClass("active");

		if( this.overlayElement.getStyle("display") != "block" )
		{
			var elementWidth = $(window).getWidth()-50;
			var elementLeft = 25;
			if( width != null )
			{
				elementWidth = width;
				elementLeft = ($(window).getWidth()-elementWidth)/2;
			}
			
			var elementHeight = $(window).getHeight()-50;
			var elementTop = 25;
			if( height != null )
			{
				elementHeight = height;
				elementTop = ($(window).getHeight()/2)-(elementHeight/2);
			}

			this.overlayElement.setStyles({
				'top': -$(window).getScroll().y,
				'height': $(window).getScrollSize().y+$(window).getScroll().y
			});
			this.displayElement.setStyles({
				'top': elementTop,
				'left': elementLeft,
				'width': elementWidth,
				'height': elementHeight
			});

			var iframeHeight = elementHeight-84-50;
			if( this.scrollHolder.getStyle("display") == "none" )
			{
				iframeHeight += 74;
			}

			this.iframe.setStyles({
				'width': elementWidth-20,
				'height': iframeHeight
			});
			this.scrollHolder.setStyle("width",elementWidth-20);
			this.scrollAreaHolder.setStyle("width",elementWidth-20-27-27);
			this.overlayElement.setStyle("opacity",0.4);
			this.overlayElement.setStyle("display","block");
			this.displayElement.setStyle("display","block");
		}

		this.updateScollArrows();
		
		return false;
	}

	this.close = function(){
		this.overlayElement.setStyle("display","none");
		this.displayElement.setStyle("display","none");
	}
}