function newPalette(){
    if( confirm("This will remove the current Palette. Do you want to start a new palette?") ){
        $("#howtodrag").css('display','inline');
        $("#howtodrag").css('top','5%');
        $("#howtodrag").css('left','5%');
        $("#howtodrag").css('width','90%');
    
        // This removes all "li" elements on the color grid:
        $("#color_grid").children().remove();

        // Reset the palette's name
        $("#sc_name").val( "Write here your palette's name!" );
    }
    

}

function savePaletteUED(){
    if( id_user != null && id_user > 0 ){


        // Save this palette.
        var data ={};
        data['id_user'] = id_user;
        data['pal_name'] = "Paleta test";
        data['ispublic'] = "0";



        var acolors=new Array();

        $children = $(".color_sample");
        var nChildren = $children.length;



        for( i = 0 ; i < nChildren ; i++ ){

            var color = $(".color_sample:eq("+i+")").css('background-color');

            var rgbvals = /rgb\((.+),(.+),(.+)\)/i.exec(color);
            var rval = parseInt(rgbvals[1]);
            var gval = parseInt(rgbvals[2]);
            var bval = parseInt(rgbvals[3]);

            var acolor = new Array();
            acolor['name'] = "Nombre color "+i;
            acolor['r'] = rval;
            acolor['g'] = gval;
            acolor['b'] = bval;


            acolors[i] = acolor;


        }

        
        data['colors'] = ued_encode(acolors);


        $.post( 'cgi-bin/palette_save.php', data , function(data) {
            alert(data);
        ///$("container").html(data);
        }
        );
    }else{
// Ask for login or create a new account
}
}

function savePalette(){
    
    if( id_user != null && id_user > 0 ){

        
        // Save this palette.
        var data ={};
        data['id_user'] = id_user;
        data['pal_name'] = $("#sc_name").val();
        data['ispublic'] = "0";



        var colors=new Array();

        $children = $(".color_sample");
        var nChildren = $children.length;

        var json = "{";
        var rval;
        var gval;
        var bval;
        for( i = 0 ; i < nChildren ; i++ ){

            var color = $(".color_sample:eq("+i+")").css('background-color');

            if( color.substring(0,1)=="#" ){

                var rgb = hexToRgb( color , "" );
                rval = parseInt(rgb.r*255);
                gval = parseInt(rgb.g*255);
                bval = parseInt(rgb.b*255);

            }else {
                var rgbvals = /rgb\((.+),(.+),(.+)\)/i.exec(color);


                rval = parseInt(rgbvals[1]);
                gval = parseInt(rgbvals[2]);
                bval = parseInt(rgbvals[3]);
            }



            json = json + "\"c"+i+"\":";
            json=json+"{\"n\":\"color"+i+"\",\"rgb\":["+rval+","+gval+","+bval+"]}";
            if( i < nChildren-1 )
                json = json+","

         
        }
        json = json+"}";
        data['colors'] = json;


        
        $.post( 'cgi-bin/palette_save.php', data , function(data) {
            openDialog( 1 , data );
            
        }
        );
    }else{
        // Ask for login or create a new account
        var htmlMustLogin ="<p class=\"alert_plain\">You are not logged in. Please enter your login info before saving a palette.</p>";
        htmlMustLogin += "<table width=\"100%\" class=\"login_table\">";
        htmlMustLogin += "<tr><td width=\"45%\">User:</td><td width=\"10%\"></td><td width=\"45%\">Password:</td></tr>";
        htmlMustLogin += "<tr><td width=\"45%\"><input class=\"input_box\" type=\"text\" name=\"user\" /></td><td width=\"10%\"></td><td width=\"45%\"><input class=\"input_box\" type=\"text\" name=\"pass\" /></td></tr>";
        htmlMustLogin += "</table>";
        htmlMustLogin += "<right><div id=\"alert_float_button\" onclick=\"login()\"><p>Log in</p></div></right>";
        htmlMustLogin +="<br/><br/><p class=\"alert_plain_light\" onclick=\"register()\">If you are not registered, create now a free account</p>";

        openDialog( 1 , htmlMustLogin );
    }

    
}

function openPalette(){
   
    if( id_user != null && id_user > 0 ){
        // Get all saved palettes from the current user
        $.post( 'cgi-bin/palette_getuserpalettes.php', "id_user="+id_user , function(data) {
            openDialog( 1 , data );
        }
        );
    }else{
        // Ask for login or create a new account

        var htmlMustLogin ="<p class=\"alert_plain\">You are not logged in. Please enter your login info before saving and loading palettes.</p>";
        htmlMustLogin += "<table width=\"100%\" class=\"login_table\">";
        htmlMustLogin += "<tr><td width=\"45%\">User:</td><td width=\"10%\"></td><td width=\"45%\">Password:</td></tr>";
        htmlMustLogin += "<tr><td width=\"45%\"><input class=\"input_box\" type=\"text\" name=\"user\" /></td><td width=\"10%\"></td><td width=\"45%\"><input class=\"input_box\" type=\"text\" name=\"pass\" /></td></tr>";
        htmlMustLogin += "</table>";
        htmlMustLogin += "<right><div id=\"alert_button\" onclick=\"login()\"><p>Log in</p></div></right>";
        htmlMustLogin +="<br/><br/><p class=\"alert_plain_light\" onclick=\"register()\">If you are not registered, create now a free account</p>";

        openDialog( 1 , htmlMustLogin );
    }
}

function loadPalette(){
    
    closeDialog();


    $.post( 'cgi-bin/palette_load.php', "id_pal="+$('#palette_list').val() , function(data) {

        $("#howtodrag").css('display','none');
        // This removes all "li" elements on the color grid:
        $("#color_grid").children().remove();
            
        var objeto = jQuery.parseJSON(data);

        $("#sc_name").val( objeto.name );
        var len = objeto.colors.length;
        var r = 0;
        var g = 0;
        var b = 0;
        for( i = 0 ; i < len ; i++ ){
            r = objeto.colors[i].r;
            g = objeto.colors[i].g;
            b = objeto.colors[i].b;
            addColor2Palette( r , g , b );
        }
            
        openDialog( 1 , "<p class=\"alert_title\">Your palette has been loaded!</p>" );
            

    });

    
}

function addColor2Palette( r , g , b ){
    var hex_color = rgbToHex( r/255 , g/255 , b/255 , true );
    
    $("#color_grid").append("<li class=\"color_sortable ui-state-default\"><div class=\"color_sample\" onmousedown=\"colorsample_mousedown(this)\" onmouseup=\"colorsample_mouseup(this)\" style=\"background-color: "+hex_color+";\"></div></li>");
}

//ued_encode() will take an array as its argument and return the data encoded in UED format - as a string.
//http://www.openjs.com/scripts/data/ued_url_encoded_data/
function ued_encode(arr,current_index) {
    var query = ""
    if(typeof current_index=='undefined') current_index = '';

    if(typeof(arr) == 'object') {
        var params = new Array();
        for(key in arr) {
            var data = arr[key];
            var key_value = key;
            if(current_index) {
                key_value = current_index+"["+key+"]"
            }

            if(typeof(data) == 'object') {
                if(data.length) { //List
                    for(var i=0;i<data.length; i++) {
                        params.push(key_value+"[]="+ued_encode(data[i],key_value)); //:RECURSION:
                    }
                } else { //Associative array
                    params.push(ued_encode(data,key_value)); //:RECURSION:
                }
            } else { //String or Number
                params.push(key_value+"="+encodeURIComponent(data));
            }
        }
        query = params.join("&");
    } else {
        query = encodeURIComponent(arr);
    }

    return query;
}

function downloadPalette(){
    // Save this palette.
        



    $children = $(".color_sample");
    var nChildren = $children.length;

    var json = "{";
var rval;
        var gval;
        var bval;
        for( i = 0 ; i < nChildren ; i++ ){

            var color = $(".color_sample:eq("+i+")").css('background-color');

            if( color.substring(0,1)=="#" ){

                var rgb = hexToRgb( color , "" );
                rval = parseInt(rgb.r*255);
                gval = parseInt(rgb.g*255);
                bval = parseInt(rgb.b*255);

            }else {
                var rgbvals = /rgb\((.+),(.+),(.+)\)/i.exec(color);


                rval = parseInt(rgbvals[1]);
                gval = parseInt(rgbvals[2]);
                bval = parseInt(rgbvals[3]);
            }



        json = json + "\"c"+i+"\":";
        json=json+"{\"n\":\"color"+i+"\",\"rgb\":["+rval+","+gval+","+bval+"]}";
        if( i < nChildren-1 )
            json = json+","


    }
    json = json+"}";
       

    $('[name=json_colors]').val( json );
    $("#form_download").submit();
       
}

function login(){
    closeDialog();

    $.post( 'cgi-bin/login.php', "user="+$('[name=user]').val()+"&"+"pass="+$('[name=pass]').val() , function(data) {
        
        var response = jQuery.parseJSON(data);
        var user_id = parseInt( response.id_user );
        if( user_id > 0 )
            setUser(user_id , $('[name=user]').val() );

        openDialog( 1 , response.html );
    });
}

function register(){

    var html_register ="<p class=\"alert_plain\">Create your account for free, so that you can save and load palettes!</p>";
    html_register += "<table width=\"100%\" class=\"login_table\">";
    html_register += "<tr><td width=\"40%\">User:</td><td width=\"5%\"></td><td width=\"50%\"><input class=\"input_box\" type=\"text\" name=\"reg_user\" /></td></tr>";
    html_register += "<tr><td width=\"40%\">Password:</td><td width=\"5%\"></td><td width=\"50%\"><input class=\"input_box\" type=\"text\" name=\"reg_pass\" /></td></tr>";
    html_register += "<tr><td width=\"40%\">Repeat password:</td><td width=\"5%\"></td><td width=\"50%\"><input class=\"input_box\" type=\"text\" name=\"reg_pass_ver\" /></td></tr>";
    html_register += "<tr><td width=\"40%\">Email:</td><td width=\"5%\"></td><td width=\"50%\"><input class=\"input_box\" type=\"text\" name=\"reg_email\" /></td></tr>";
    html_register += "</table>";
    html_register += "<div id=\"alert_button\" onclick=\"checkRegister()\"><p>Register</p></div>"


    openDialog( 1 , html_register );

}

function checkRegister(){
    var response ="";

    var user = $('[name=reg_user]').val();
    var pass = $('[name=reg_pass]').val();
    var passv = $('[name=reg_pass_ver]').val();
    var email = $('[name=reg_email]').val();

    

    $.post( 'cgi-bin/user_available.php', "user_name="+user , function(data) {
        
        if( data == "KO" ){
            response+= "<p class=\"alert_plain\">The user name that you entered is not available.<br/><br/>Try another one!</p>";
            response+= "<div id=\"alert_button\" onclick=\"register()\"><p>Retry</p></div>";
            openDialog( 1 , response );
        }else if(user.length == 0 || checkString(user)==false){
            response+= "<p class=\"alert_plain\">Please enter a valid username!</p>";
            response+= "<div id=\"alert_button\" onclick=\"register()\"><p>Retry</p></div>";
            openDialog( 1 , response );
        }else if(email.length == 0 || checkEmail(email)==false){
            response+= "<p class=\"alert_plain\">Please enter a valid email address!</p>";
            response+= "<div id=\"alert_button\" onclick=\"register()\"><p>Retry</p></div>";
            openDialog( 1 , response );
        }else if( pass=="" || pass != passv  || checkString(pass)==false){
            response+= "<p class=\"alert_plain\">Please enter a valid password!</p>";
            response+= "<div id=\"alert_button\" onclick=\"register()\"><p>Retry</p></div>";
            openDialog( 1 , response );
        }else{
            response+= "<p class=\"alert_plain\">An email to the email address that you entered will be sent. Please read the email and click on the provided link to complete your registration process</p>";
            response+= "<div id=\"alert_button\" onclick=\"closeDialog()\"><p>OK</p></div>"

            $.post( 'cgi-bin/register.php', "user="+user+"&pass="+pass+"&email="+email , function(data) {

                });

            openDialog( 1 , response );
        }
    });


    
}

function checkEmail( str ){

    var c;
    for( i = str.length - 1 ; i >= 0 ; i-- ){
        c = str.charAt( i );
        if( c==' ' )
            return false;
    }

    var a = str.indexOf("@");
    var a2 = str.lastIndexOf("@");


    if( a == 0 || a2 != a )
        return false;

    var p = str.lastIndexOf(".");

    if( p > a )
        return true;

    return false;
}

function checkString( str ){
    var c;
    for( i = str.length - 1 ; i >= 0 ; i-- ){
        c = str.charAt( i );
        if( !((c>='A' && c<='Z') || ( c>='a' && c<='z') || (c>='0' && c<='9') ))
            return false;
    }
    return true;
}

function importPalette( id_pal){

    closeDialog();


    $.post( 'cgi-bin/palette_load.php', "id_pal="+id_pal , function(data) {

        $("#howtodrag").css('display','none');
        // This removes all "li" elements on the color grid:
        $("#color_grid").children().remove();

        var objeto = jQuery.parseJSON(data);

        $("#sc_name").val( "Imported: "+objeto.name );
        var len = objeto.colors.length;
        var r = 0;
        var g = 0;
        var b = 0;
        for( i = 0 ; i < len ; i++ ){
            r = objeto.colors[i].r;
            g = objeto.colors[i].g;
            b = objeto.colors[i].b;
            addColor2Palette( r , g , b );
        }

        openDialog( 1 , "<p class=\"alert_title\">The public palette was imported!</p>" );


    });


}

function updateColors(){




    // Save this palette.
    var colors=new Array();
    var data ={};


    $children = $(".color_sample");
    var nChildren = $children.length;

    var json = "{";

    var rval = 0;
    var gval = 0;
    var bval = 0;

    
    for( i = 0 ; i < nChildren ; i++ ){

        var color = $(".color_sample:eq("+i+")").css('background-color');
            
        if( color.substring(0,1)=="#" ){
            
            var rgb = hexToRgb( color , "" );
            rval = parseInt(rgb.r*255);
            gval = parseInt(rgb.g*255);
            bval = parseInt(rgb.b*255);

        }else {
            var rgbvals = /rgb\((.+),(.+),(.+)\)/i.exec(color);

           
            rval = parseInt(rgbvals[1]);
            gval = parseInt(rgbvals[2]);
            bval = parseInt(rgbvals[3]);
        }

             

        json = json + "\"c"+i+"\":";
        json=json+"{\"n\":\"color"+i+"\",\"rgb\":["+rval+","+gval+","+bval+"]}";
        if( i < nChildren-1 )
            json = json+","


    }
    
    json = json+"}";
    data['colors'] = json;




    $.post( 'cgi-bin/palette_update.php', data , function(data) {
            
        }
        );



}