// That code snippet belongs to Online Charts Builder - http://charts.hohli.com

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]);
        
        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');
    };
    
    /**
     * 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').click();
            }
        }
    }
    
    /**
     * 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;
        }
    }
    
    /**
     * 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'}));
        
        $('#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'));
    };
}



$(document).ready(function(){
    
    // Init Charts API
    var chartsDom = new ChartsDOM(new ChartsAPI());

    $("#content h2").click(function(){
        $(this).next("div.post").slideToggle();
    });
        
    // select elements
    $('.select a').click(function(){        
        
        // close current set
        $(this).parent().slideUp();
        
        // trigger the dom manipulation
        $(this).trigger('chouse');
        
        return false;
    });

    $('.select a').bind('chouse', function(){        
        // switch class for select only one
        $(this).parent().find('a').removeClass('selected');
        $(this).addClass('selected');
        
        // change label
        var title = $(this).attr('title');
        $(this).parent().prev().find('em').html(title);
        
        // set data
        var type = $(this).parent().attr('id');
        var data = $(this).attr('name');
        
        chartsDom.set(type, data);
    });    
            
    // color picker
    $(".color .colori").each(function() {
	 var color = $(this).val();
	 if (color!='auto')
	        $(this).next().css('backgroundColor', '#'+color);
    });

    $('.color input:enabled').ColorPicker({
    	onBeforeShow: function () {
    		$(this).ColorPickerSetColor(this.value);
    	},
        onChange: function (hsb, hex, rgb, el) {
            $(el).val(hex);
            $(el).next().css('backgroundColor', '#'+hex);
        },
        onSubmit: function (hsb, hex, rgb, el) {
            $(el).val(hex);
            $(el).next().css('backgroundColor', '#'+hex);
        },
    	onShow: function (colpkr) {
    		$(colpkr).fadeIn(500);
    		return false;
    	},
    	onHide: function (colpkr) {
    		$(colpkr).fadeOut(300);
    		chartsDom.update();
    		chartsDom.refresh();
    		return false;
    	}
    }).bind('keyup', function(){
        $(this).ColorPickerSetColor(this.value);
    });

    // sliders
    $('.angle').each(function(){        
        var input = $(this).parent().children('input');        
        $(this).slider({
            min:-1,
            max:181,
            value:input.val(),
            slide:function(event, ui){
                input.val($(this).slider('option', 'value'));
            },
            change:function(event, ui){
    		    chartsDom.update();
                chartsDom.refresh();
            }
        });
    });
    
    $('.offset').each(function(){        
        var input = $(this).parent().children('input');        
        $(this).slider({
            min:-0.1,
            max:1.1,
            step:0.1,
            value:input.val(),
            slide:function(event, ui){
                input.val($(this).slider('option', 'value'));
            },
            change:function(event, ui){                
    		    chartsDom.update();
                chartsDom.refresh();
            }
        });
    });
    
    $('.width').each(function(){        
        var input = $(this).parent().children('input');        
        $(this).slider({
            min:0,
            max:50,
            step:1,
            value:input.val(),
            slide:function(event, ui){
                input.val($(this).slider('option', 'value'));
            },
            change:function(event, ui){                
    		    chartsDom.update();
                chartsDom.refresh();
            }
        });
    });
    
        
    // bind buttons
    $('input.button').click(function(){
        var method = $(this).attr('name');
        chartsDom[method]();
    });
    
    $('#data .container li.edit a').live('click', function() {
        chartsDom.editData($(this).attr('name'));
        return false;
    });
    
    $('#data .container li.del a').live('click', function() {
        chartsDom.delData($(this).attr('name'));
        return false;
    });
    
    $('#axes .container li.edit a').live('click', function() {
        chartsDom.editAxis($(this).attr('name'));
        return false;
    });
    
    $('#axes .container li.del a').live('click', function() {
        chartsDom.delAxis($(this).attr('name'));
        return false;
    });

    // bind checkboxes
    $('.checkbox').click(function(){
        if ($(this).is(':checked')) {
            chartsDom.set($(this).attr('id'), true);
        } else {
            chartsDom.set($(this).attr('id'), false);
        }
    });
    
    // FIXME: Need refactoring for most flexible
    $('#axes input[name=axis_l]').click(function(){
        var val = $(this).val();
        switch (val) {
            case 'd':
            case 'a':
                $('#axis_label').attr('disabled','disabled');
                $('#axis_start').attr('disabled','disabled');
                $('#axis_end').attr('disabled','disabled');
                $('#axis_interval').attr('disabled','disabled');
                break;
            case 's':
                $('#axis_label').attr('disabled','disabled');
                $('#axis_start').removeAttr("disabled");
                $('#axis_end').removeAttr("disabled");
                $('#axis_interval').removeAttr("disabled");
                break;
            case 'm':
                $('#axis_label').removeAttr("disabled");
                $('#axis_start').attr('disabled','disabled');
                $('#axis_end').attr('disabled','disabled');
                $('#axis_interval').attr('disabled','disabled');
                break;
        }
    });
    
    // data max value
    $('#bar-auto-flag').click(function(){
        chartsDom.update();
        chartsDom.refresh();
    });
    
    $('#data-max-flag').click(function(){
        if ($(this).is(':checked')) {
            $('#data-max-value').removeAttr("disabled");
        } else {
            $('#data-max-value').attr('disabled','disabled'); 
        }
    });
    
    $('#grid-flag').click(function(){
        if ($(this).is(':checked')) {
            $('#grid').find('ul input').removeAttr("disabled");
        } else {
            $('#grid').find('ul input').attr('disabled','disabled'); 
        }
    });
    
    $('#data-max input, #title input, #title select, #grid input, #background-s input, #background-lg input, #background-ls input').change(function(){
        chartsDom.update();
        chartsDom.refresh();
    });
    
    $('#preview img').colorbox({inline:true, href:'#fullview'});

    // init parsing
    if ($('#parse_url').val() != '' && $('#parse_url').val() != chartsDom.def.parse_url) {
        $('#parse').click();
    }
    
    // input def values
    $('.default').each(function(){
        var id = $(this).attr('id');
        if ($(this).val() == '') {
            $(this).val(chartsDom.def[id]);
        } else if ($(this).val() != chartsDom.def[id]) {
            $(this).removeClass('default');
        }
        
        $(this).blur(function(){
            if ($(this).val() == '' || $(this).val() == chartsDom.def[id]) {
                $(this).val(chartsDom.def[id]);
                $(this).addClass('default');
            }
        });
        
        $(this).focus(function(){
            $(this).removeClass('default');
            if ($(this).val() == chartsDom.def[id]) {
                $(this).val('');
            }

        });
    });
    
    // error values
    $('.error').live('click', function() {
       $(this).removeClass('error');
    });
    
    chartsDom.init();
    chartsDom.update();
    chartsDom.refresh();
});