var ChartsDOM = function(api){
    
    this.api = api;
    this.position = {
        x:'bottom',
        y:'left',
        t:'top',
        r:'right'
    };
    this.def = {
        parse_url:'http://',
        data_label:'Label'
        
    };
    
    /**
     * Data Manipulation
     */
    this.addData = function() {
        
        var data  = $('#data_data').val();
        var label = ($('#data_label').val() == this.def['data_label'])?'':$('#data_label').val();
        var color = $('#data_color').val();
        
        if (!this.api.validate('data', data)) {
            $('#data_data').addClass('error');
            return false;
        }
        
        var id = this.api.addData(data, label, color);
        
        this._addData(id);
        this.clearData();
        this.refresh();
    };
    
    /**
     * Data DOM Manipulation
     */
    this._addData = function(id) {
        if (null !== id) {
            var data = this.api.getData(id);
            
            if (id == 0) {
                $('#data .container').html('<ul></ul>');
            }
            
            var dom = '<ul class="inline">'+
                        '<li><input type="text" name="label" value="'+data[1]+'" readonly="readonly"/></li>'+
                        '<li><input type="text" name="color" value="" style="background:#'+data[2]+'" readonly="readonly" class="colorv"/></li>'+
                        '<li><input type="text" name="data"  value="'+data[0]+'" readonly="readonly"/></li>'+
                        '<li class="edit"><a href="#" name="'+id+'" title="Edit"></a></li>'+
                        '<li class="del"><a href="#" name="'+id+'" title="Delete"></a></li>'+
                      '</ul>';
            
            $('#data .container > ul').append('<li id="data-el-'+id+'">'+dom+'</li>');

        };
    };
    
    this.editData = function(id) {
        
        var data = this.api.getData(id);
        
        $('#data_data').val(data[0]);
        $('#data_label').val(data[1]);
        $('#data_color').val(data[2]);
        $('#data_color').next().css({'background-color':'#'+data[2]});
        
        this.delData(id);
    }; 
    
    this.delData = function(id) {
        $('#data-el-'+id).remove();
        this.api.delData(id);        
        this.refresh();
    }; 
    
    this.clearData = function() {
        $('#data_data').val('');
        $('#data_label').val('');
        $('#data_color').val('auto');
        $('#data_color').next().css({'background-color':'#ffffff'});
    };
    
    /**
     * Axis Manipulation
     */
    this.addAxis = function() {
       
       var id = this.api.addAxis(
          $('#axis').val(),
          $('#axis_label').val(),
          $('#axes input[name=axis_l]:checked').val(),
          [$('#axis_start').val(), $('#axis_end').val(),  $('#axis_interval').val()],
          [$('#axis_color').val(), $('#axis_size').val(), $('#axis_aligment').val()]
       );
       
       this._addAxis(id);
       
       this.clearAxis();       
       this.refresh();
    };
    
    /**
     * Axis DOM Manipulation
     */
    this._addAxis = function(id) {
       
       if (null !== id) {
            var axis = this.api.getAxis(id);
            
            if (id == 0) {
                $('#axes .container').html('<ul></ul>');
            }
            
            var data = [];

            switch (axis.opt) {
                case 'a':
                    data = [this.position[axis.type], 'auto', 'min - max', axis.style[0]];                    
                    break;
                case 's':
                    data = [this.position[axis.type], 'custom', axis.range[0] + ' - ' + axis.range[0] + ' / ' + axis.range[0], axis.style[0]];                    
                    break;
                case 'm':
                    data = [this.position[axis.type], 'custom', axis.label.join(','), axis.style[0]];
                    break;
                case 'd':
                default:
                    data = [this.position[axis.type], 'default', '0 - 100', axis.style[0]];
                    break;
                
            }
            
            var dom = '<ul class="inline">'+
                        '<li><input type="text" class="tiny" name="position" value="'+data[0]+'" readonly="readonly"/></li>'+
                        '<li><input type="text" class="tiny" name="label" value="'+data[1]+'" readonly="readonly"/></li>'+
                        '<li><input type="text" class="tiny" name="range" value="'+data[2]+'" readonly="readonly"/></li>'+
                        '<li><input type="text" name="color" value="" style="background:#'+data[3]+'" readonly="readonly" class="colorv"/></li>'+
                        '<li class="edit"><a href="#" name="'+id+'" title="Edit"></a></li>'+
                        '<li class="del"><a href="#" name="'+id+'" title="Delete"></a></li>'+
                      '</ul>';
            
            $('#axes .container > ul').append('<li id="axis-el-'+id+'">'+dom+'</li>');

        };
    };
    
    this.editAxis = function(id) {        
        var axis = this.api.getAxis(id);
        
        $('#axis').val(axis.type);
        $('#axis_label').val(axis.label);
        
        $('#axis_l_'+axis.opt).click();
        
        $('#axis_start').val(axis.range[0]);
        $('#axis_end').val(axis.range[1]);
        $('#axis_interval').val(axis.range[2]);
        
        $('#axis_color').val(axis.style[0]);
        $('#axis_size').val(axis.style[1]);
        $('#axis_aligment').val(axis.style[2]);
        
        this.delAxis(id);
    }
    
    this.delAxis = function(id) {
        $('#axis-el-'+id).remove();
        this.api.delAxis(id);
        this.refresh();
    }; 
    /**
     * Clear axis
     */
    this.clearAxis = function() {
        $('#axis_label').val('');
        $('#axis_l_d').click();
        
        $('#axis_start').val();
        $('#axis_end').val();
        $('#axis_interval').val();
        
        $('#axis_size').val(8);
        $('#axis_aligment').val();
        $('#axis_color').val('000000');
    };   
    
    /**
     * Constructor
     */
    this.init = function() {
        var _self = this;
        
        // type and size
        $('#type a[name='+this.get('type')+']').trigger('chouse');
        $('#size a[name='+this.get('size')+']').trigger('chouse');
        
        // data
        var data = this.get('data');
        $.each(data, function(k,v) {
            _self._addData(k);
        });
        
        // data max value
        if (this.get('max') != 100) {
            $('#data-max-flag').attr('checked', 'checked');
            $('#data-max-value').val(this.get('max'));
            $('#data-max-value').removeAttr('disabled');
        }
        
        // axis
        var axis = this.get('axis');
        $.each(axis, function(k,v) {
            _self._addAxis(k);
        });
        
        // title
        $('#title_title').val(this.get('title'));
        $('#title_color').val(this.get('title_color'));
        $('#title_size').val(this.get('title_size'));
        
        // background
        if (this.get('bg')) {
            $('#bg-flag-' + this.get('bg_type')).click();
            switch (this.get('bg_type')) {
                case 's':
                    $('#bg_s_color').val(this.get('bg_data')[0]);
                    break;
                case 'lg':
                    $('#bg_lg_angle').val(this.get('bg_data')[0]);
                    $('#bg_lg_color').val(this.get('bg_data')[1]);
                    $('#bg_lg_offset').val(this.get('bg_data')[2]);
                    $('#bg_lg_color2').val(this.get('bg_data')[3]);
                    $('#bg_lg_offset2').val(this.get('bg_data')[4]);
                    break;
                case 'ls':
                    $('#bg_ls_angle').val(this.get('bg_data')[0]);
                    $('#bg_ls_color').val(this.get('bg_data')[1]);
                    $('#bg_ls_width').val(this.get('bg_data')[2]);
                    $('#bg_ls_color2').val(this.get('bg_data')[3]);
                    $('#bg_ls_width2').val(this.get('bg_data')[4]);
                    break;
            }
        }
        
        if (this.get('chbg')) {
            $('#chbg-flag-' + this.get('chbg_type')).click();
            
            switch (this.get('chbg_type')) {
                case 's':
                    $('#chbg_s_color').val(this.get('chbg_data')[0]);
                    break;
                case 'lg':
                    $('#chbg_lg_angle').val(this.get('chbg_data')[0]);
                    $('#chbg_lg_color').val(this.get('chbg_data')[1]);
                    $('#chbg_lg_offset').val(this.get('chbg_data')[2]);
                    $('#chbg_lg_color2').val(this.get('chbg_data')[3]);
                    $('#chbg_lg_offset2').val(this.get('chbg_data')[4]);
                    break;
                case 'ls':
                    $('#chbg_ls_angle').val(this.get('chbg_data')[0]);
                    $('#chbg_ls_color').val(this.get('chbg_data')[1]);
                    $('#chbg_ls_width').val(this.get('chbg_data')[2]);
                    $('#chbg_ls_color2').val(this.get('chbg_data')[3]);
                    $('#chbg_ls_width2').val(this.get('chbg_data')[4]);
                    break;
            }
        }
        
        // bar options
        if (this.get('bar')) {
            if (this.get('bar_auto')) {
                $('#bar-auto-flag').attr('checked','checked');
            } else {
                $('#bar-auto-flag').removeAttr('checked');
            }
            $('#bar_width').val(this.get('bar_width'));
            $('#bar_space_bar').val(this.get('bar_space_bar'));
            $('#bar_space_group').val(this.get('bar_space_group'));
        }
        
        // fillarea
        if (this.get('fillarea')) {
            $('#fillarea').attr('checked','checked');
        } else {
            $('#fillarea').removeAttr('checked');
        }
        
        // grid
        if (this.get('grid')) {
            var grid = this.get('grid_data');
            $('#grid_x_step').val(grid[0]);
            $('#grid_y_step').val(grid[1]);
            $('#grid_line').val(grid[2]);
            $('#grid_blank').val(grid[3]);
            $('#grid_x_offset').val(grid[4]);
            $('#grid_y_offset').val(grid[5]);
            if (!$('#grid-flag').is(':checked')) {                
                $('#grid-flag').attr('checked','checked');
                $('#grid').find('ul input').removeAttr("disabled");
            }
        }
    }
    
    /**
     * Parse URL
     */
    this.parse = function() {
        if ($('#parse_url').val() != '' && $('#parse_url').val() != this.def.parse_url ) {
            this.api.parse($('#parse_url').val());
            this.init();
            return true;
        } else {
            $('#parse_url').addClass('error');
            return false;
        }
    }
    
    /**
     * Parse Hash
     */
    this.parseHash = function() {
        var hash = document.location.hash.substr(1);
        if (hash.length > 2 && hash != '') {
            this.api.parse(hash, true);
            this.init();
        }
    }
    
    /**
     * Check Hash
     */
    this.checkHash = function() {
        var hash = document.location.hash.substr(1);
        if (this.api.hash != hash) {
            console.log('Need reparse hash');
        }
    }
    
    /**
     * Set propertie value
     */
    this.set = function(type, data) {
        this._set(type,data);        
        this.refresh();
    };
    /**
     * Set propertie value
     */
    this._set = function(type, data) {
        switch (type) {
            case 'type':
                $('#content > div').show();
                $('#content > div:not(.all)').filter(':not(.'+data+')').hide();
                break;
            
        }
        this.api.set(type,data);
    };
    
    /**
     * Set propertie value
     */
    this.get = function(type) {
        return this.api.get(type);
    };
    
    /**
     * Update properties from static fields
     */
    this.update = function() {
        // max value
        if ($('#data-max-flag').is(':checked')) {
            this.api.set('max', $('#data-max-value').val());
        } else {
            // leave previouse data
            // this.api.set('max', 100);
        }
        
        // title
        this.api.set('title',       $('#title_title').val());
        this.api.set('title_color', $('#title_color').val());
        this.api.set('title_size',  $('#title_size').val());
        
        // image background
        switch ($('input[name=bg-flag]:checked').val()) {
            case 's':
                this.api.setBg('s', [$('#bg_s_color').val()]);
                break;
            case 'lg':
                this.api.setBg('lg', [$('#bg_lg_angle').val(), 
                                 $('#bg_lg_color').val(),
                                 $('#bg_lg_offset').val(),
                                 $('#bg_lg_color2').val(),
                                 $('#bg_lg_offset2').val()
                                 ]);
                break;
            case 'ls':                
                this.api.setBg('ls', [$('#bg_ls_angle').val(), 
                                 $('#bg_ls_color').val(),                                 
                                 $('#bg_ls_width').val(),
                                 $('#bg_ls_color2').val(),                               
                                 $('#bg_ls_width2').val()
                                 ]);
                break;
        }
        
        // chart background
        switch ($('input[name=chbg-flag]:checked').val()) {
            case 's':
                this.api.setChbg('s', [$('#chbg_s_color').val()]);
                break;
            case 'lg':
                this.api.setChbg('lg', [$('#chbg_lg_angle').val(), 
                                 $('#chbg_lg_color').val(),
                                 $('#chbg_lg_offset').val(),
                                 $('#chbg_lg_color2').val(),
                                 $('#chbg_lg_offset2').val()
                                 ]);
                break;
            case 'ls':                
                this.api.setChbg('ls', [$('#chbg_ls_angle').val(), 
                                 $('#chbg_ls_color').val(),                                 
                                 $('#chbg_ls_width').val(),
                                 $('#chbg_ls_color2').val(),                               
                                 $('#chbg_ls_width2').val()
                                 ]);
                break;
        }
        
        // bar options
        if ($('#bar-auto-flag').is(':checked')) {
            this.api.setBarWidth('a');
        } else {
            this.api.setBarWidth($('#bar_width').val(), $('#bar_space_bar').val(), $('#bar_space_group').val());
        }
        
        // fillarea
        if ($('#fillarea').is(':checked')) {
            this.api.set('fillarea', true);
        } else {
            this.api.set('fillarea', false);
        }
      
        
        // grid
        if ($('#grid-flag').is(':checked')) {
            this.api.set('grid', true);
            this.api.set('grid_data', [$('#grid_x_step').val(),
                               $('#grid_y_step').val(),
                               $('#grid_line').val(),
                               $('#grid_blank').val(),
                               $('#grid_x_offset').val(),
                               $('#grid_y_offset').val()]);
        } else {
            this.api.set('grid', false);
        };
    }; 
    
    /**
     * Refresh preview image and embeded code
     */
    this.refresh = function() {        
        var img = this.api.build();
        
        $('#result_url').val(img);
//        $('#result_edit').val('http://'+document.location.host + '/?url='+encodeURIComponent(img));
        $('#result_embed').val('<img src="'+img+'" alt="Chart build on http://charts.hohli.com" />');
        
        $('#preview img').attr('src', this.api.build({size: '160x160'}, true));
        
        $('#fullview a').attr('href', img);
        $('#fullview img').attr('src', img);
//        $('#fullview img').attr('width', (this.get('size').split('x')[0]));
//        $('#fullview img').attr('height', (this.get('size').split('x')[1]));
        
        $('#data-max-value').val(this.get('max'));
    };
}