// alle "but" bør rettes til "bot"

var LinearGradient = new function () {
	var self = this;
		
	self.elid = "page";  // element id
	
	
	self.dir = "top";      // eller left for vertical
	self.millisecs = 30;  // sæt op hvis langsommere - kan dårligt blive hurtige 
	self.stepSize = 1;  // kan sættes op til 2 eller 3 hvis det skal gå hurtigere 
	
	
	
	self.transparent = 0.8; 
	
	
	self.operaColor = "rgba(0,73,139,0.8)";
	
	
	
	// farven skifter fra top til but
	// farven animeres fra start til end. 
	// fx. hvis rød aldrig er 0 vil alle farver have et rødt islæt
	// der bliver animeret fra topstart til topslut - så hvis der ikke er 255 imellem dem skifter farven hurtige
		
	// nb denne virker både i ie8 og ie9 men ikke i Opera. Kun SVG virker i Opera
	// nb noter også at der i MS documentationen står at dette filter er outdated med ie9 - det virker altså stadig alligvel, men hvor længe?
	
		
	
	self.allColors = 
	[
		{
			topStart: 255,   
			butStart: 0,  // 45,
			topEnd: 0,  // 45,
			butEnd: 255     
		},
		{
			topStart: 90,  
			butStart: 90,
			topEnd: 90,
			butEnd: 90     
		},
		{
			topStart: 0,   //45,   
			butStart: 255,  
			topEnd: 255,    
			butEnd: 0    //45  
		}
	];
	
	
	self.el = null;
	self.isie = null;
	self.isopera = null;
	
		
	this.init = function() 
	{
		var self = LinearGradient;
		
		self.isie = typeof document.all != 'undefined'
     	&& typeof window.opera == 'undefined'
    	 && navigator.vendor != 'KDE';
		 
				 
		self.isopera = typeof window.opera != 'undefined';
		
			
		
		
		if (self.isopera == true) 
		{
			
			self.el = document.getElementById(self.elid);
		
			if (self.el)
			{
				
			
				self.el.style = "background-color:" + self.operaColor + ";";
								
			}
				
			
		}
    	 
		 
		else
		{
					
			self.el = document.getElementById(self.elid);
		
			if (self.el)
			{
				
				var allColors = self.allColors;
				
				var top = new Array();
				var but = new Array();
				
				for (i=0; i<3; i++)
				{
					top[i] = allColors[i].topStart;
					but[i] = allColors[i].butStart;
				}
				self.animate(self.el, top, but);  // kald første gang
			
			}
		}

	}
	
	
	
	this.animate = function(el, top, but) 
	{
		var self = LinearGradient;
		
		var allColors = self.allColors;
				
		
		
		var dir = self.dir;
		
		var transp = self.transparent;
		
		
		
		

		
		
		if (self.isie)  // det er vist ikke nødvendigt med denne test - jo af hensyn til IE8 - og de andre skal være skilt ud i en else
		{
			if (dir == "top") var IEdir = 0;
			
			
			else var IEdir = 1;
			
			var IEtop = new Array();
			var IEbut = new Array();
			
			for(i=0; i<3; i++)
			{
				IEtop[i] = toHex(top[i]);
				IEbut[i] = toHex(but[i]);
			}
			
			var IEtransp = toHex(Math.round(transp * 255));
						
			var startColor = "#" + IEtransp + IEtop[0] + IEtop[1] + IEtop[2];
			var endColor = "#" + IEtransp + IEbut[0] + IEbut[1] + IEbut[2];
		
			el.style.filter = 'progid:DXImageTransform.Microsoft.Gradient(GradientType=' + IEdir + ',startColorstr="' + startColor + '",endColorstr="' + endColor + '")';
			
			
		}
		
		
		
		else 
		{
				
			
el.style.backgroundImage = "-webkit-linear-gradient(" + dir + ", rgba(" + top[0] + "," + top[1] + "," + top[2] + "," + transp + "),rgba(" + but[0] + "," + but[1] + "," + but[2] + "," + transp + "))";
		
el.style.backgroundImage = "-moz-linear-gradient(" + dir + ", rgba(" + top[0] + "," + top[1] + "," + top[2] + "," + transp + "),rgba(" + but[0] + "," + but[1] + "," + but[2] + "," + transp + "))";
		
		
		}
		
		
		for (i=0; i<3; i++)
		{
			top[i] = self.change(top[i], allColors[i].topStart, allColors[i].topEnd);
			
			if ((allColors[i].topStart < allColors[i].topEnd && top[i] >= allColors[i].topEnd) || 
				(allColors[i].topStart > allColors[i].topEnd && top[i] <= allColors[i].topEnd))
			{
				top[i] = allColors[i].topEnd;
				// turn
				var t = allColors[i].topStart;
				self.allColors[i].topStart = allColors[i].topEnd;   
				self.allColors[i].topEnd = t;  
				// virkede ikke med allColors[i].topStart, selvom det jo også er en variabel der burde være en kopi og ikke en pointer - hvorfor virker det så med t ???
			}
			but[i] = self.change(but[i], allColors[i].butStart, allColors[i].butEnd);
			
			
			if ((allColors[i].butStart < allColors[i].butEnd && but[i] >= allColors[i].butEnd) || 
				(allColors[i].butStart > allColors[i].butEnd && but[i] <= allColors[i].butEnd))
			
			{
				but[i] = allColors[i].butEnd;
				// turn
				var t = allColors[i].butStart;
				self.allColors[i].butStart = allColors[i].butEnd;
				self.allColors[i].butEnd = t;
			}
		}
		
		
		setTimeout(function()
    	{
     		 self.animate(el, top, but);
	 	}, self.millisecs);
	
			
	}
	
	this.change = function(cvalue, cstart, cend)   // de sidste er konstanterne fra input 
	{
		var self = LinearGradient;
		
		
		if (cstart == cend) return cvalue;   // constant
				
		else if (cstart < cend && cvalue < cend) cvalue = cvalue + self.stepSize;   // ascending
		else if (cstart < cend && cvalue >= cend) cvalue = cvalue - self.stepSize;  // descending
		else if (cstart >= cend && cvalue >= cend) cvalue = cvalue - self.stepSize;
		else cvalue = cvalue + self.stepSize;    // cstart >= cend && cvalue < cend
		
		return(cvalue);
		
		
	}
	
	
	
}

function toHex(rgb)
{
	var xarray = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
	var firstDigitInDec = Math.floor(rgb / 16);
	var secondDigitInDec = rgb % 16;
	
	
	
	var firstDigitInHex = xarray[firstDigitInDec];
	var secondDigitInHex = xarray[secondDigitInDec];
	
	var numberHex = firstDigitInHex + secondDigitInHex;
	return numberHex;
}




addLoadListener(LinearGradient.init);