﻿// Dynamic Gradient - http://www.hedgerwow.com/360/dhtml/dom-gradient-background/demo.php

//USAGE: 
//	setGradient('div ID', 'start color', 'end color','vertical or horizontal gradient [0=vertical, 1=horizontal, defaults to 0]')


//	EXAMPLE:
//	<body>
//
//	<div id="a1">Div content goes here</div>
//	<div id="p1">More div content goes here</div>
//
//	<script language="javascript" type="text/javascript">
//	setGradient('a1','#E40091','#1F1F1F',0);
//	setGradient('p1','#525252','#1F1F1F',0);
//	setGradient('example1','#ec2c23','#68e7ad',1); Another DIV
//	setGradient('example2','#bc66ba','#c25d77',0); Another DIV
//	setGradient('example3','#6e5024','#e0ed91',1); Another DIV
//	setGradient('example4','#a9eb7c','#9c9d65',0); Another DIV
//	setGradient('example5','#8241dc','#ddaf84',1); Another DIV
//	<\/script>
//	</body>
//	</html>

	var setGradient = (function(){
	    //private variables;
	    var p_dCanvas = document.createElement('canvas');
	    var p_useCanvas =  !!( typeof(p_dCanvas.getContext) == 'function');
	    var p_dCtx = p_useCanvas?p_dCanvas.getContext('2d'):null;
	    var p_isIE = /*@cc_on!@*/false;
    	 
    	
	     //test if toDataURL() is supported by Canvas since Safari may not support it
    	
       try{   p_dCtx.canvas.toDataURL() }catch(err){
              p_useCanvas = false ;
       };
             
	    if(p_useCanvas){
    	   
	       return function (dEl , sColor1 , sColor2 , bRepeatY ){
    			
			    if(typeof(dEl) == 'string') dEl =  document.getElementById(dEl);
			    if(!dEl) return false;
			    var nW = dEl.offsetWidth;
			    var nH = dEl.offsetHeight;
			    p_dCanvas.width = nW;
			    p_dCanvas.height = nH;
    			
    		
			    var dGradient;
			    var sRepeat;
			    // Create gradients
			    if(bRepeatY){
				    dGradient = p_dCtx.createLinearGradient(0,0,nW,0);
				    sRepeat = 'repeat-y';
			    }else{
				    dGradient = p_dCtx.createLinearGradient(0,0,0,nH);
				    sRepeat = 'repeat-x';
			    }		
    			
			    dGradient.addColorStop(0,sColor1);
			    dGradient.addColorStop(1,sColor2);				
    			
			    p_dCtx.fillStyle = dGradient ; 
			    p_dCtx.fillRect(0,0,nW,nH);
			    var sDataUrl = p_dCtx.canvas.toDataURL('image/png');
    			
			    with(dEl.style){
				    backgroundRepeat = sRepeat;
				    backgroundImage = 'url(' + sDataUrl + ')';
				    backgroundColor = sColor2;    
			    };
	       }
	    }else if(p_isIE){
    		
		    p_dCanvas = p_useCanvas = p_dCtx =  null;		
		    return function (dEl , sColor1 , sColor2 , bRepeatY){
			    if(typeof(dEl) == 'string') dEl =  document.getElementById(dEl);
			    if(!dEl) return false;
			    dEl.style.zoom = 1;
			    var sF = dEl.currentStyle.filter;
			    dEl.style.filter += ' ' + ['progid:DXImageTransform.Microsoft.gradient(	GradientType=',  +(!!bRepeatY ),',enabled=true,startColorstr=',sColor1,', endColorstr=',sColor2,')'].join('');
    		    
		    };
    	
	    }else{
    		
		    p_dCanvas = p_useCanvas = p_dCtx =  null;
		    return function(dEl , sColor1 , sColor2  ){
    			
			    if(typeof(dEl) == 'string') dEl =  document.getElementById(dEl);
			    if(!dEl) return false;
			    with(dEl.style){
				     backgroundColor = sColor2; 
			    };
			    //alert('your browser does not support gradient effect');
		    }
	    }
    })();