// Set some global variables

var d_Count=0, c_Count=0, c_Type=1, c_area, d_area, rc_btn, dc_btn, ad_btn, rd_btn, da_btn, ra_btn, sc_btn, numbox, letters;

// Initialize our globals and check for Canvas support.
window.onload = function (){
    
    d_area = document.getElementById("d_area");
    
    c_area = document.getElementById("c_area");
    
    rc_btn = document.getElementById("rmCanvas_btn");
    
    dc_btn = document.getElementById("drawCanvas_btn");
    
    ad_btn = document.getElementById("addDiv_btn");
    
    rd_btn = document.getElementById("removeDiv_btn");
    
    da_btn = document.getElementById("drawAlpha_btn");
    
    ra_btn = document.getElementById("rmAlpha_btn");
    
    sc_btn = document.getElementById("show_code_btn");
    
    numbox = document.getElementById('numboxes');
    
    da_btn.disabled = false;
    
    sc_btn.disabled = false;
            
    ra_btn.disabled = true;
    
    rd_btn.disabled = true;				
                    
    // Test for HTML5 Canvas support	
    
    if (!!document.createElement('canvas').getContext){
        
        dc_btn.disabled=false; 
        
        rc_btn.disabled=true;		
          
    }else{
                        
        document.getElementById("b_warning").style.display="block"
        
        dc_btn.disabled=true;
    
    }
	
}

// Function to add DIV's
function addDiv(){
    
    if (document.getElementById("div_text").value==''){
        
        alert('Please add some text to DIV Text!!');
        
    }else{
        
        var div = document.createElement('div');
        
        var tContent = "DIV: "+d_Count+" - ";
        
        tContent += document.getElementById("div_text").value;
        
        if (document.body.innerText) {
            
            div.innerText = tContent;		   
           
        } else {
            
            div.textContent = tContent;
           
        }		
        
        div.setAttribute('class', 'div_txt');
        
        div.setAttribute('id', 'div_'+d_Count);
        
        d_area.appendChild(div);
    
        d_Count++;
        
        document.getElementById("div_text").value = '';	
        
        rd_btn.disabled=false;
            
    }
		
}

// Function to remove added DIV's
function remDiv(){		
		
    var remdiv = document.getElementById("div_"+(d_Count-1));
    
    d_area.removeChild(remdiv);
    
    d_Count--;
    
    if (d_Count==0) rd_btn.disabled=true;

}

/*
Function to add shapes to canvas
by toggling though 3 Shape Types
*/
function addCanvas(){	
		
    var ctx =c_area.appendChild(createCanvas(104,104,'canvas_'+c_Count)).getContext("2d");
    
    if (c_Type>3) c_Type=1;	
    
    switch(c_Type){
        
        // Draw Square
        case 1:					
            
            grd = ctx.createLinearGradient(0, 0.000, 0, 100.000);
            
            grd.addColorStop(0.000, 'rgba(41, 137, 204, 1.000)');
            
            grd.addColorStop(0.500, 'rgba(255, 255, 255, 1.000)');
            
            grd.addColorStop(0.520, 'rgba(144, 106, 0, 1.000)');
            
            grd.addColorStop(0.640, 'rgba(217, 159, 0, 1.000)');
            
            grd.addColorStop(1.000, 'rgba(255, 255, 255, 1.000)');
            
            ctx.fillStyle = grd;
                    
            ctx.fillRect(2, 2, 100, 100);
            
            dc_btn.value="Add Canvas with a Triangle";
            
        break;
        
        // Draw Triangle		
        case 2:
        
            ctx.beginPath();
            
            ctx.moveTo(2,50);
            
            ctx.lineTo(100,100);
            
            ctx.lineTo(100,2);
            
            var grd=ctx.createLinearGradient(0, 50.000, 100, 50.000);		
                  
            grd.addColorStop(0.409, 'rgba(127, 0, 63, 1.000)');
            
            grd.addColorStop(0.851, 'rgba(255, 0, 0, 1.000)');
            
            ctx.fillStyle = grd;
                
            ctx.fill();
            
            dc_btn.value="Add Canvas with a Circle";
            
        break;
        
        // Draw Circle
        case 3:	
            
            ctx.beginPath();
            
            ctx.arc(52,52,50,0,Math.PI*2,true);
            
            ctx.stroke();
            
            var grd=ctx.createRadialGradient(50,50,0,50,50,60);		
                  
            grd.addColorStop(0.416, 'rgba(255, 255, 255, 1.000)');
            
            grd.addColorStop(0.851, 'rgba(0, 127, 255, 1.000)');
            
            ctx.fillStyle = grd;
                
            ctx.fill();				
                    
            dc_btn.value="Add Canvas with a Square";
            
        break;		
                
    }
    
    c_Type++;
    
    c_Count++;	
    
    rc_btn.disabled=false;
}

// Function to create canvases
function createCanvas(h,w,c_id){
	
     var c = document.createElement("canvas");
     
     c.id = c_id; 
     
     c.width = w;
     
     c.height = h;
     
     return c;
}

// Function to remove shapes and canvases
function remCanvas(){		
    
    var remCanvas = document.getElementById("canvas_"+(c_Count-1));
    
    c_area.removeChild(remCanvas);
    
    c_Count--;
    
    if (c_Count==0) rc_btn.disabled=true;

}

function selectCode(){(){
    
    deselectCode();
    
    if (document.selection) {
        
        var range = document.body.createTextRange();
        
        range.moveToElementText(document.getElementById("codetext"));
            
        range.select();
    
    }else if (window.getSelection) {
        
        var range = document.createRange();
        
        range.selectNode(document.getElementById("codetext"));
        
        window.getSelection().addRange(range);
        
    }

}

function deselectCode() {
	
    if (document.selection) document.selection.empty(); 
    
    else if (window.getSelection) window.getSelection().removeAllRanges();
	
}

function displayCode() {
    
    document.getElementById("code").style.display="block";	
    
    sc_btn.disabled  = true;
    
}

// Create Alphabet Letters Function

function genLetters(){
    
    var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    
    letters = str.split("");
    
    var div = document.getElementById('numboxes');
    
    for(i=0; i<letters.length; i++) {
        
        numbox.innerHTML = numbox.innerHTML + '<div class="letters">'+letters[i]+'</div>';	
        
    };
    
    da_btn.disabled = true;
    
    ra_btn.disabled = false;		

};

// Remove Alphabet Letters Function

function remLetters(){
        
    numbox.innerHTML = "";	
    
    da_btn.disabled = false;
    
    ra_btn.disabled = true;		

};

// Generate HTML Links Function	

function genHTML(){
    
    var linkmessage=document.getElementById("nolinkstext").innerHTML;	
    
    linkmessage = linkmessage.replace(/\u200B/g, "");
    
    var replacePattern1 = /(src="|href="|">|\s>)?(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;ï]*[-A-Z0-9+&@#\/%=~_|ï]/gim;
        
    var replacedText = linkmessage.replace(replacePattern1, function($0,$1){ return $1?$0:'<a class="url" href="' + $0 + '" target="_blank" >'+ $0+ '</a>';});
    
    var replacePattern2 = /(src="|href="|">|\s>|https?:\/\/|ftp:\/\/)?www\.[-A-Z0-9+&@#\/%?=~_|!:,.;ï]*[-A-Z0-9+&@#\/%=~_|ï]/gim;
    
    var replacedText = replacedText.replace(replacePattern2, function($0,$1){ return $1?$0:'<a class="url" href="http://' + $0 + '" target="_blank" >'+ $0+ '</a>';});
    
    var replacePattern3 = /([\.\w]+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim;
        
    var replacedText = replacedText.replace(replacePattern3, '<a class="url" href="mailto:$1">$1</a>');	
    
    document.getElementById("linkedtext").innerHTML=replacedText;
}