$(document).ready(function() {
	
	
var MaxInputs       = 10; //maximum input boxes allowed
var InputsWrapper   = $("#InputsWrapper"); //Input boxes wrapper ID
var AddButton       = $("#AddMoreWWWBox"); //Add button ID

var x = InputsWrapper.length; //initlal text box count
var FieldCount=1; //to keep track of text box added

var weblists = $.parseJSON($("input[name='websites_list']").val()); // get and decode json object


$.each(weblists, function(idx, obj) { // add existing elements
	FieldCount++; //text box added increment
    //add input box
	if(idx == 0 ){ // to first element
		$( "div input[name='websites[]']" ).first().val(obj.www);
		$( "div input[name='websites_id[]']" ).first().val(obj.id);
	} else { // rest
		$(InputsWrapper).append('<tr><td><input type="hidden" value="'+obj.id+'" name="websites_id[]"><input type="text" size="30" name="websites[]" id="field_'+ FieldCount +'" value="'+obj.www +'"/></td><td><a href="#" class="removeclass"><img class="id-ff-remove" name="0" src="index.php?entryPoint=getImage&amp;themeName=Sugar5&amp;imageName=id-ff-remove.png"></a></td></tr>');
	}
    x++; //text box increment

});

$(AddButton).click(function (e)  //on add input button click
{
        if(x <= MaxInputs) //max input box allowed
        {
            FieldCount++; //text box added increment
            //add input box
            $(InputsWrapper).append('<tr><td><input type="hidden" value="" name="websites_id[]"><input type="text" size="30" name="websites[]" id="field_'+ FieldCount +'" value="http://"/></td><td><a href="#" class="removeclass"><img class="id-ff-remove" name="0" src="index.php?entryPoint=getImage&amp;themeName=Sugar5&amp;imageName=id-ff-remove.png"></a></td>,/tr>');
            x++; //text box increment
        }
return false;
});

$("body").on("click",".removeclass", function(e){ //user click on remove text
        if( x > 1 ) {
        	 $(this).closest('tr').remove();//remove text box
                x--; //decrement textbox
        }
return false;
})

});