function BannerArea(id, path)
{	
	/* Helper object */
	helper = this;
	this.base = id;
	this.path = path;
	/* Setup the Banner Area area to our liking */
	var div = document.getElementById(id);
	
	this.width = div.getAttribute('width');
	this.height = div.getAttribute('height');
	
	div.style.position = 'relative';
	div.style.overflow = 'hidden';
	div.style.clip = 'rect(0px,0px,' + this.width + 'px,' + this.height + 'px)';
	this.container = div;
	
	/* Image bookkeeping */
	this.images = 0;
	this.currentImage = 0;
	this.loadedImages = 0;
	
	/* Image flow */
	this.pause = 0;
	this.transitionTime = 300;
	this.displayTime = 7000;
	//div.onmouseover = function() { helper.pause = 1; }
	//div.onmouseout = function() { helper.pause = 0; }
	
	
	/* UA Check - we do some optimizations for Webkit (mainly for the benefit of mobile browsers) */
	this.webkit = 0;
	if (navigator.userAgent.indexOf(' AppleWebKit') != -1) { this.webkit = 1; }
	
	if (this.path == '') { this.PrerenderSetup(); return; }
	

/*
	control.onclick = function() { helper.Zero(); };	
	setTimeout(function(thisObj) { thisObj.Update(); }, this.period, this);
*/
	//setTimeout("Update()", this.period);
}

BannerArea.prototype.PrerenderSetup = function()
{
	node = this.container;
	helper = this;
	var child = node.firstChild;
	var counter = 0;
	
	while (child != null)
	{
		if (child.nodeName == 'DIV')
		{
			if (child.getAttribute('displaytime')) { counter++; }
			//if (child.getAttribute('deferred-background-image')) { counter++; }
			
			canvasi = child.getElementsByTagName('canvas');
			for (var ci = 0; ci < canvasi.length; ci++)
			{
				var canvasElt = canvasi[ci];
				cattr = canvasi[ci].attributes;
				var canvas = new Object;
				for (var ai = 0; ai < cattr.length; ai++)
				{
					if (cattr[ai].specified) // IE hax.
					{
						eval('canvas.' + cattr[ai].name + ' = "' + cattr[ai].value + '";');
					}
				}
				
				/* More IE hax */
				if (typeof G_vmlCanvasManager != 'undefined') { 
					// you must reassign the element to the return of this method. 
					canvasElt = G_vmlCanvasManager.initElement(canvasElt); 
				} 
				
				
				eval( canvas.draw + '(canvasElt, canvas);' );	
			}
		}
		
		child = child.nextSibling;
	}
	
	// Setup nav
	child = document.getElementById(this.base + '-nav-container');
	navclickers = child.getElementsByTagName('div');
	var b = this;
	for (var ni = 0; ni < counter; ni++)
	{
		navclickers[ni].onclick = function() { helper.NavTo(this, b); }
	}
	
	this.images = counter - 1;
	this.Loop();
}

BannerArea.prototype.Update = function()
{
	span = document.getElementById(this.target);
	this.counter = this.counter + 1;
	span.innerHTML = this.base + " " + this.counter;
	this.timeout = setTimeout(function(thisObj) { thisObj.Update(); }, this.period, this);
	//setTimeout("Update()", this.period);
}

BannerArea.prototype.Zero = function()
{
	//span = document.getElementById(this.target);
	this.counter = 0;
	this.clearTimeout(this.timeout);
	this.Update();
}

BannerArea.prototype.Loop = function()
{
	/* Only one frame? Don't scroll it. */
	if (this.images == 0) { return 0; }
	
	this.currentFrame = document.getElementById(this.base + '-' + this.currentImage);
	
	var dtime = this.currentFrame.getAttribute('displaytime') || this.displayTime;	
	this.timeoutDisplay = setTimeout(function(thisObj) { thisObj.Slider(); }, dtime - this.transitionTime, this);
}

BannerArea.prototype.NavTo = function( object, b )
{
	var frame = object.getAttribute('nav-frame');
	clearTimeout(b.timeoutDisplay);
	
	if (b.lockout == 1) { clearTimeout(b.timeoutRetryNav); b.timeoutRetryNav = setTimeout(function(thisObj) { thisObj.NavTo(object); }, 100, b); }
	clearTimeout(b.timeoutRetryNav);
	
	if (frame == b.currentImage) { return; }
	//b.nextImage = parseInt(frame);
	
	//clearTimeout(b.timeoutLockout);
	
	b.Slider(true, frame);
}

BannerArea.prototype.Show = function(object, z, opacity)
{
	object.style.zIndex = z;
	object.style.visibility = 'visible'; 
	this.ChangeOpac(object, opacity);
}

BannerArea.prototype.Hide = function(object)
{
	object.style.zIndex = 1;
	object.style.visibility = 'hidden'; 
	this.ChangeOpac(object, 0);	
}

BannerArea.prototype.Slider = function(active, frame)
{
	var force = false;
	if (active) { force = true; }
	/*
		If the slider is paused, try again in 1.5 seconds.. 
		Won't apply if we forced a slide change using the nav controls.
	*/
	if (this.pause == 1 && force == 0) { alert("Pause"); this.timeoutPause = setTimeout(function(thisObj) { thisObj.Slider(); }, this.period, this); return; }
	clearTimeout(this.timeoutPause);
	this.lockout = 1;

	/*	Figure out the next frame in the sequence.
		- or use the one we got served from Nav.
	*/
	if (frame != null)
	{
		this.nextImage = frame;
	}	
	else
	{
		this.nextImage = this.currentImage + 1;
		if (this.nextImage > this.images) { this.nextImage = 0; }
	}
	
	
	this.currentFrame = document.getElementById(this.base + '-' + this.currentImage);
	this.nextFrame = document.getElementById(this.base + '-' + this.nextImage);
	this.Show(this.currentFrame, 90, 1);
	this.Show(this.nextFrame, 1, 1);
	
	this.OpacitySlide(this.currentFrame, 100, 0, this.transitionTime);
	
	/* If the current div got no background, we need to crossfade the next one in as well */
	if (this.currentFrame.style.backgroundColor == '') 
	{
		this.OpacitySlide(this.nextFrame, 0, 100, this.transitionTime);
	}
	
	setTimeout(function(thisObj) { thisObj.Cleanup(); }, this.transitionTime, this);
	this.NavUpdate();
}

BannerArea.prototype.NavUpdate = function()
{
	var current = document.getElementById(this.base + '-nav-' + this.currentImage);
	var next = document.getElementById(this.base + '-nav-' + this.nextImage);	
	
	next.setAttribute('class', this.base + '-nav-current');
	next.setAttribute('classname', this.base + '-nav-current'); /* IE hack */
	
	current.setAttribute('class', this.base + '-nav');
	current.setAttribute('classname', this.base + '-nav'); /* IE hack */
}

BannerArea.prototype.Cleanup = function()
{
	this.Hide(this.currentFrame);
	
	this.lockout = 0;
	this.currentImage = this.nextImage;
	
	this.Loop();
}


BannerArea.prototype.OpacitySlide = function(object, opacStart, opacEnd, millisec) { 

	/*
		If we got Webkit, use CSS transitions rather than timers.
		object.webkitTransition returns undefined in all but Safari.
	*/	
	if (this.webkit == 1)
	{
		object.style.webkitTransition = "opacity " + millisec +"ms cubic-bezier(0.25, 0.1, 0.25, 1.0)";
		object.style.opacity = opacEnd;
		return;
	}
	
	//speed for each frame 
	var speed = Math.round(millisec / 100); 
	var timer = 0; 
	
	//determine the direction for the blending, if start and end are the same nothing happens 
	if(opacStart > opacEnd) { 
		for(i = opacStart; i >= opacEnd; i--) { 
			var CBi = CubicBezierAtTime( (100 - i) / 100, 0.25, 0.1, 0.25, 1.0, 100);
			
			this.timeout = setTimeout(function(thisObj, object, opacity) { thisObj.ChangeOpac(); }, (timer * speed), this, object, (1 - CBi) );
			
			setTimeout("changeOpac(" + (1 - CBi) + ",'" + id + "')",(timer * speed)); 
			timer++; 
		} 
	}
} 


BannerArea.prototype.ChangeOpac = function(object, opacity) { 
	if (this.webkit) { if (opacity == 1) { object.style.webkitTransition = null; } }
	
	object.style.opacity = opacity;
	object.style.MozOpacity = opacity; 
	object.style.KhtmlOpacity = opacity;
	object.style.filter = "alpha(opacity=" + Math.ceil(opacity * 100) + ")"; 
}






function sverokinramning(e, args)
{
	//var e = document.getElementById(id);

	var ctx = e.getContext('2d');
	
	var color = args.color;
	if (color == null) { color = 'blue'; }
	
	var gradient;
	if (color == 'green')
	{
		gradient = ctx.createLinearGradient(0,0,0,260);
		gradient.addColorStop(0, '#228f6b');
		gradient.addColorStop(0.3, '#2ab887');
		gradient.addColorStop(0.38, '#2ab887');
		gradient.addColorStop(1, '#104732');
	}

	if (color == 'blue')
	{
		gradient = ctx.createLinearGradient(0,0,0,260);
		gradient.addColorStop(0, '#224e8f');
		gradient.addColorStop(0.3, '#2a67b8');
		gradient.addColorStop(0.38, '#2a67b8');
		gradient.addColorStop(1, '#122c4f');
	}
	
	
	/* Gör highlighten på bilden */
	ctx.strokeStyle = "rgba(255,255,255,0.18)"
	ctx.beginPath();
	ctx.moveTo(551,1);
	ctx.lineTo(551,89);
	ctx.lineTo(571,116);
	ctx.lineTo(551,143);
	ctx.lineTo(551,259);
	ctx.lineTo(999,259);
	ctx.lineTo(999,1);
	ctx.lineTo(551,1);
	ctx.stroke();
	ctx.closePath();

	/* Gör skivan */
	ctx.strokeStyle = 'rgba(0,0,0,1)';	
	ctx.fillStyle = gradient;
	ctx.beginPath();
	ctx.moveTo(0,0);
	ctx.lineTo(550,0);
	ctx.lineTo(550,89);
	ctx.lineTo(570,116);
	ctx.lineTo(550,143);
	ctx.lineTo(550,260);
	ctx.lineTo(0,260);
	ctx.lineTo(0,0);
	ctx.clip();
	ctx.fill();
	ctx.closePath;

	/* Skuggning till vänster */
	ctx.beginPath();
	ctx.moveTo(0,0);
	ctx.lineTo(0,260);
	ctx.shadowOffsetX = -0;
	ctx.shadowBlur = 6;
	ctx.stroke();
	ctx.closePath();

	/* Skuggning längs wedge'n */
	ctx.beginPath();
	ctx.moveTo(550,0);
	ctx.lineTo(550,89);
	ctx.lineTo(570,116);
	ctx.lineTo(550,143);
	ctx.lineTo(550,260);
	ctx.shadowOffsetX = 0;
	ctx.shadowBlur = 6;
	ctx.stroke();
	ctx.closePath();

	/* ...och skivans highlight... */
	ctx.save();
	var highlightGradient = ctx.createLinearGradient(0,0,0,260);
	highlightGradient.addColorStop(0, 'rgba(255,255,255,0.74)');	
	highlightGradient.addColorStop(0.75, 'black');
	ctx.lineWidth = 2;
	ctx.strokeStyle = highlightGradient;
	ctx.beginPath();
	ctx.moveTo(0,260);
	ctx.lineTo(0,0);
	ctx.stroke();
	ctx.closePath();
	ctx.restore();

	/* Skuggning upptill */
	ctx.beginPath();
	ctx.moveTo(0,0);
	ctx.lineTo(550,0);
	ctx.shadowOffsetX = -0;
	ctx.shadowBlur = 3;
	ctx.stroke();
	ctx.closePath();

	/* Skuggning nertill */
	ctx.beginPath();
	ctx.moveTo(0,260);
	ctx.lineTo(550,260);
	ctx.shadowOffsetX = -0;
	ctx.shadowBlur = 3;
	ctx.stroke();
	ctx.closePath();	
}