$(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();
    }
    
    chartsDom.parseHash();

    // 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();
});