String.prototype.trim = function() {
    return this.replace(/^\s*|\s*$/, "");
}

function validateinput(){

var is_start_colour_valid = validatecolor("start_color");
var is_end_colour_valid = validatecolor("end_color");
var is_bgcolor_valid = validatecolor("bgcolor");
var is_bdcolor_valid = validatecolor("bdcolor");

var is_radius_num = validatenumber("radius");
var is_bdwidth_num = validatenumber("bdwidth");
var is_gdheight_numb = validatenumber("gdheight");
var is_height_numb = validatenumber("height");

var result = is_start_colour_valid&&is_end_colour_valid&&is_bgcolor_valid&&is_bdcolor_valid&&is_radius_num&&is_bdwidth_num&&is_gdheight_numb&&is_height_numb;

if (result){

    if ($("radius").value.trim()>40) {
        $("alertradius").innerHTML = "radius <=40 px";
        return false;
    }
    if ($("bdwidth").value.trim()>20) {
        $("alertbdwidth").innerHTML = "border width <=20 px";
        return false;
    }
    
     if ($("gdheight").value.trim()>250) {
        $("alertgdheight").innerHTML = "gradient height <=250 px";
        return false;
     }
     
     if ( parseInt($("gdheight").value.trim()) > parseInt($("height").value.trim())) {
        $("height").value= $("gdheight").value.trim();
        $("alertheight").innerHTML = "Gradient Height <= box height";
     }
     
    
}
return result;
}


function validatecolor(id){
var color =  $(id).value.trim().replace("#","");
var myArray = color.match(/^([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$/ig)
if ( myArray == null) {
$("alert"+id).innerHTML = "* invalid color";
return false;
}
return true;
}

function validatenumber(id) {

var num =  $(id).value.trim();
if (isNaN(num)) {
$("alert"+id).innerHTML = "* number ";
return false;
}
return true;

}


function resetalert(){
var ids = ["start_color","end_color","gdheight","radius","bgcolor","bdcolor","bdwidth","height"];
    for(i=0;i<ids.length;i++) {
    $("alert"+ids[i]).innerHTML ="";
    }
}

var bggcolor,radius,height;

function getimg(){

var vali = validateinput();
if (vali==false) {
return;
}

resetalert();

var foregroundcolor = $("start_color").value.trim().replace("#","");
var endcolor = $("end_color").value.trim().replace("#","");
var backgroundcolor = $("bgcolor").value.trim().replace("#","");
bggcolor = backgroundcolor;
var bordercolor = $("bdcolor").value.trim().replace("#","");
var gdheight = $("gdheight").value.trim();
radius =  $("radius").value.trim();
var borderwidth =  $("bdwidth").value.trim();
height =  $("height").value.trim();


$("status").style.display = "block";
ajax.getRequest("roundedgd.php",["foregroundcolor","endcolor","backgroundcolor","bordercolor","gdheight","radius","borderwidth","height"], [foregroundcolor,endcolor,backgroundcolor,bordercolor,gdheight,radius,borderwidth,height], display);


 function display(a) {
    
       $("status").style.display = "none";  
     
       var imgs = a.split(/\+/);
       
       var tags = $("box").getElementsByTagName("span");  
       var tl = tags[0]; var tr = tags[1]; var bl = tags[2];var br = tags[3]; 
       for (i=0;i<tags.length;i++) {   
           tags[i].style.backgroundImage = "url(rcimage/"+imgs[0]+")";
           tags[i].style.width = radius+"px";
           tags[i].style.height = radius+"px";
          
       }
       
       
       tl.style.top = "0";
       tl.style.left = "0";
       tl.style.backgroundPosition = "0px 0";
       
       tr.style.top = "0";
       tr.style.right = "0";
       tr.style.backgroundPosition = radius+"px 0";
       
    
	   bl.style.bottom = "0";
       bl.style.left = "0";
       bl.style.backgroundPosition = "0px "+radius+"px";	
		
	   br.style.bottom = "0";
       br.style.right = "0";
       br.style.backgroundPosition = radius+"px "+radius+"px";
       
       var clds =  $("box").childNodes;
       
       for(i=0;i<clds.length;i++) {
       if (clds[i].tagName=="DIV") 
       var innerbox = clds[i];
            
       }
       
       innerbox.style.border = borderwidth+"px solid #"+bordercolor;
       innerbox.style.backgroundColor = "#"+endcolor;
       innerbox.style.backgroundImage = "url(image/"+imgs[2]+")";
       innerbox.style.height = height+"px";
       
       $("gd1").style.backgroundImage = "url(image/"+imgs[2]+")";
       $("gd1").style.backgroundRepeat = "repeat-x";
       $("gd1").style.backgroundColor =  "#"+endcolor;
       $("gd1").style.width = "100px";
       $("gd1").style.height =  height+"px";
       $("gd1").style.marginTop = (parseInt(borderwidth)+18)+"px";
       
       $("rc").src =  "rcimage/"+imgs[0];
       
       $("down").innerHTML ="";
        var taga = document.createElement("a");
        taga.href = "image/"+imgs[2];
        var txt = document.createTextNode(" download");
         taga.appendChild(txt);
         
         $("down").appendChild(taga);
         
       
       var spans = tab1.Divs[0].getElementsByTagName("span"); 
      
       for(i=0;i<spans.length;i++) {
     
   //alert(spans[i].parentNode.className);
       if (spans[i].parentNode.className=="cornerbox3") {
     
           spans[i].style.backgroundImage = "url(rcimage/"+imgs[1]+")"; 
           
        }   
             
       }
       
        $("box").parentNode.style.backgroundColor = "#"+backgroundcolor;
       
      // tab1.Divs[0].style.backgroundColor = "#"+backgroundcolor;
       tab1.Divs[0].style.height =  (parseInt(height)+2*parseInt(radius)+10)+"px";
       
       var boxbg = (foregroundcolor==endcolor) ? "" : "background: url(image/"+ imgs[2]+") repeat-x;"+"\n";
       var boxbd = (parseInt(borderwidth)==0) ? "" : " border: 1px solid #"+bordercolor+";\n";
       var strcss = ".cornerbox {"+"\n"
            + " position: relative;"+"\n"
            + " width:80%;"+"\n"
            + " }"+"\n"
            + " .corner {"+"\n"
            + " position: absolute;"+"\n"
            + " width: "+radius+"px;" +"\n"
            + " height: "+radius+"px;" +"\n"
            + " background: url(rcimage/"+ imgs[0]+");"+"\n"
            + " font-size: 0%;"+"\n"
            + " }"+"\n"
            + " .content {"+"\n"
            +  boxbd
            +  boxbg
            + " background-color: #"+endcolor+";\n"
            + " height: "+height+"px;\n"
            + " }"+"\n"
            + " .tl {"+"\n"
            + " top: 0;"+"\n"
            + " left: 0;"+"\n"
            + " background-position: 0px 0;" + "\n"
            + " }"+"\n"
            + " .tr {"+"\n"
            + " top: 0;"+"\n"
            + " right: 0;"+"\n"
            + " background-position: "+radius+"px 0;" + "\n"
            + " }"+"\n"
            + " .bl {"+"\n"
            + " bottom: 0;"+"\n" 
            + " left: 0;"+"\n"
            + " background-position: 0px "+radius+"px;" + "\n"
            + " }"+"\n"
            + " .br {"+"\n"
            + " bottom: 0;"+"\n" 
            + " right: 0;"+"\n"
            + " background-position: "+radius+"px "+radius+"px;" + "\n"
            + " }"+"\n"
            
       $("css").value =  strcss; 
       
     
 }      
       
}

function socialbkmk() {
var u = location.href;
var t = document.title;
location.href = 'http://www.pagecolumn.com/social_bookmark2.htm?pgcoluu='+u+'&pgcoltt='+t;
}

 function RGBColor(color_string)
{
    this.ok = false;

    color_string = color_string.replace(/\#?/,"");

    color_string = color_string.toLowerCase();
    this.simple_colors = {
        aliceblue: 'f0f8ff',
        antiquewhite: 'faebd7',
        aqua: '00ffff',
        aquamarine: '7fffd4',
        azure: 'f0ffff',
        beige: 'f5f5dc',
        bisque: 'ffe4c4',
        black: '000000',
        blanchedalmond: 'ffebcd',
        blue: '0000ff',
        blueviolet: '8a2be2',
        brown: 'a52a2a',
        burlywood: 'deb887',
        cadetblue: '5f9ea0',
        chartreuse: '7fff00',
        chocolate: 'd2691e',
        coral: 'ff7f50',
        cornflowerblue: '6495ed',
        cornsilk: 'fff8dc',
        crimson: 'dc143c',
        cyan: '00ffff',
        darkblue: '00008b',
        darkcyan: '008b8b',
        darkgoldenrod: 'b8860b',
        darkgray: 'a9a9a9',
        darkgreen: '006400',
        darkkhaki: 'bdb76b',
        darkmagenta: '8b008b',
        darkolivegreen: '556b2f',
        darkorange: 'ff8c00',
        darkorchid: '9932cc',
        darkred: '8b0000',
        darksalmon: 'e9967a',
        darkseagreen: '8fbc8f',
        darkslateblue: '483d8b',
        darkslategray: '2f4f4f',
        darkturquoise: '00ced1',
        darkviolet: '9400d3',
        deeppink: 'ff1493',
        deepskyblue: '00bfff',
        dimgray: '696969',
        dodgerblue: '1e90ff',
        feldspar: 'd19275',
        firebrick: 'b22222',
        floralwhite: 'fffaf0',
        forestgreen: '228b22',
        fuchsia: 'ff00ff',
        gainsboro: 'dcdcdc',
        ghostwhite: 'f8f8ff',
        gold: 'ffd700',
        goldenrod: 'daa520',
        gray: '808080',
        green: '008000',
        greenyellow: 'adff2f',
        honeydew: 'f0fff0',
        hotpink: 'ff69b4',
        indianred : 'cd5c5c',
        indigo : '4b0082',
        ivory: 'fffff0',
        khaki: 'f0e68c',
        lavender: 'e6e6fa',
        lavenderblush: 'fff0f5',
        lawngreen: '7cfc00',
        lemonchiffon: 'fffacd',
        lightblue: 'add8e6',
        lightcoral: 'f08080',
        lightcyan: 'e0ffff',
        lightgoldenrodyellow: 'fafad2',
        lightgrey: 'd3d3d3',
        lightgreen: '90ee90',
        lightpink: 'ffb6c1',
        lightsalmon: 'ffa07a',
        lightseagreen: '20b2aa',
        lightskyblue: '87cefa',
        lightslateblue: '8470ff',
        lightslategray: '778899',
        lightsteelblue: 'b0c4de',
        lightyellow: 'ffffe0',
        lime: '00ff00',
        limegreen: '32cd32',
        linen: 'faf0e6',
        magenta: 'ff00ff',
        maroon: '800000',
        mediumaquamarine: '66cdaa',
        mediumblue: '0000cd',
        mediumorchid: 'ba55d3',
        mediumpurple: '9370d8',
        mediumseagreen: '3cb371',
        mediumslateblue: '7b68ee',
        mediumspringgreen: '00fa9a',
        mediumturquoise: '48d1cc',
        mediumvioletred: 'c71585',
        midnightblue: '191970',
        mintcream: 'f5fffa',
        mistyrose: 'ffe4e1',
        moccasin: 'ffe4b5',
        navajowhite: 'ffdead',
        navy: '000080',
        oldlace: 'fdf5e6',
        olive: '808000',
        olivedrab: '6b8e23',
        orange: 'ffa500',
        orangered: 'ff4500',
        orchid: 'da70d6',
        palegoldenrod: 'eee8aa',
        palegreen: '98fb98',
        paleturquoise: 'afeeee',
        palevioletred: 'd87093',
        papayawhip: 'ffefd5',
        peachpuff: 'ffdab9',
        peru: 'cd853f',
        pink: 'ffc0cb',
        plum: 'dda0dd',
        powderblue: 'b0e0e6',
        purple: '800080',
        red: 'ff0000',
        rosybrown: 'bc8f8f',
        royalblue: '4169e1',
        saddlebrown: '8b4513',
        salmon: 'fa8072',
        sandybrown: 'f4a460',
        seagreen: '2e8b57',
        seashell: 'fff5ee',
        sienna: 'a0522d',
        silver: 'c0c0c0',
        skyblue: '87ceeb',
        slateblue: '6a5acd',
        slategray: '708090',
        snow: 'fffafa',
        springgreen: '00ff7f',
        steelblue: '4682b4',
        tan: 'd2b48c',
        teal: '008080',
        thistle: 'd8bfd8',
        tomato: 'ff6347',
        turquoise: '40e0d0',
        violet: 'ee82ee',
        violetred: 'd02090',
        wheat: 'f5deb3',
        white: 'ffffff',
        whitesmoke: 'f5f5f5',
        yellow: 'ffff00',
        yellowgreen: '9acd32'
    };
            
    for (var key in this.simple_colors) {
        if (color_string==key) {
			color_string = this.simple_colors[key];
        }      
        if ( color_string==this.simple_colors[key]) {
        this.name = key;
        
        }
    }
    
      
    var color_defs = [
        {
            re: /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/,
            //re: /^rgb\((1[0-9]{2}|25[0-5]|2[0-4]\d|\d{1,2}),(1[0-9]{2}|25[0-5]|2[0-4]\d|\d{1,2}),(1[0-9]{2}|25[0-5]|2[0-4]\d|\d{1,2})\)$/,
            example: ['rgb(123, 234, 45)', 'rgb(255,234,245)'],
            process: function (bits){
                return [
                    parseInt(bits[1]),
                    parseInt(bits[2]),
                    parseInt(bits[3])
                ];
            }
        },
        {
            re: /^([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$/,
            example: ['#00ff00', '336699'],
            process: function (bits){
                return [
                    parseInt(bits[1], 16),
                    parseInt(bits[2], 16),
                    parseInt(bits[3], 16)
                ];
            }
        },
        {
            re: /^([a-f0-9])([a-f0-9])([a-f0-9])$/,
            example: ['#fb0', 'f0f'],
            process: function (bits){
                return [
                    parseInt(bits[1] + bits[1], 16),
                    parseInt(bits[2] + bits[2], 16),
                    parseInt(bits[3] + bits[3], 16)
                ];
            }
        }
    ];

    // search through the definitions to find a match
    for (var i = 0; i < color_defs.length; i++) {
        var re = color_defs[i].re;
        var processor = color_defs[i].process;
        var bits = re.exec(color_string);
        if (bits) {
            channels = processor(bits);
            this.r = channels[0];
            this.g = channels[1];
            this.b = channels[2];
            this.ok = true;
           
        }

    }

    this.toRGB = function () {
        return 'rgb(' + this.r + ', ' + this.g + ', ' + this.b + ')';
    }
    this.toHex = function () {
        var r = this.r.toString(16);
        var g = this.g.toString(16);
        var b = this.b.toString(16);
        if (r.length == 1) r = '0' + r;
        if (g.length == 1) g = '0' + g;
        if (b.length == 1) b = '0' + b;
        return '#' + r + g + b;
    }
   
    
}


function Blend(a, b, alpha) {
  var ca = Array(
    parseInt('0x' + a.substring(1, 3)), 
    parseInt('0x' + a.substring(3, 5)), 
    parseInt('0x' + a.substring(5, 7))
  );
  var cb = Array(
    parseInt('0x' + b.substring(1, 3)), 
    parseInt('0x' + b.substring(3, 5)), 
    parseInt('0x' + b.substring(5, 7))
  );
  r = '0' + Math.round(ca[0] + (cb[0] - ca[0])*alpha).toString(16);
  g = '0' + Math.round(ca[1] + (cb[1] - ca[1])*alpha).toString(16);
  b = '0' + Math.round(ca[2] + (cb[2] - ca[2])*alpha).toString(16);
  return ['#'
    + r.substring(r.length - 2)
    + g.substring(g.length - 2)
    + b.substring(b.length - 2),'rgb(' + Math.round(ca[0] + (cb[0] - ca[0])*alpha) + ', ' + Math.round(ca[1] + (cb[1] - ca[1])*alpha) + ', ' + Math.round(ca[2] + (cb[2] - ca[2])*alpha) + ')'];
}

function getTargetElement(evt) {
    return (evt.target) ? ((evt.target.nodeType == 3) ? evt.target.parentNode : evt.target) : evt.srcElement;
}


function addEvent( obj, type, fn ) {
  if ( obj.attachEvent ) {
    obj["e"+type+fn] = fn;
    obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
    obj.attachEvent( "on"+type, obj[type+fn] );
  } else
    obj.addEventListener( type, fn, false );
}

function vtcolumns(color) {
var div = document.createElement("div");
div.style.width="30px";
div.style.height = "30px";
div.style.fontSize = "0px";
div.style.overflow = "hidden";
div.style.marginTop="2px";
div.style.marginRight="2px";
var divfloat = (document.all)  ? "styleFloat" : "cssFloat";
div.style[divfloat]="left";
div.style.backgroundColor=color;

div.onmouseover = function(e){
e = (e) ? e : ((window.event) ? window.event : "");
var o = getTargetElement(e);
var cl = new RGBColor(o.style.backgroundColor);

$("hex").innerHTML = cl.toHex();
$("hex").style.color = cl.toHex();

}
return div;
}


function go() {

$("colors").innerHTML = "";
var foregroundcolor = $("start_color").value.trim().replace("#","");
var endcolor = $("end_color").value.trim().replace("#","");


var color1 = new RGBColor(foregroundcolor);
var color2 = new RGBColor(endcolor);

if ((color1.ok==true)&&(color2.ok==true)) {


var step = 16;

creatvtdivs(color1.toHex(),color2.toHex(),step);

}

}

function creatvtdivs(cl1,cl2, s) {

$("colors").appendChild(vtcolumns(cl1));

for(var i=0; i<s; i++){

var d= (i+1)/(s+2);
var bkcolor = Blend(cl1,cl2,d)[0];

$("colors").appendChild(vtcolumns(bkcolor));

}

$("colors").appendChild(vtcolumns(cl2));


}