var placeholders = [ "{ generate a slideshow from images #1-4 }", 
                     "{ generate a nav as a grid }", 
                     "{ show the project's description paragraphs #4-6 }", 
                     "{ generate a widget from twitter with 3 tweets }", 
                     "{ show the user's name }",
                     "{ project:\"Strange Attractors\"'s blurb }" ];

function sendParsel() {
    var query;
    
    if ($('#parsel input').val() != '')
        query = $('#parsel input').val();
    else
        query = $('#parsel input').attr('placeholder').substring(4);
        
    $.post('/test.php', { q : query }, function(j) {

        $('#parsel input').val(query);
        console.log(j);
        var data = jQuery.parseJSON(j);
        
        if (data.type === 'success') {
            $('#parsel .input .reset').fadeIn(500);
        
            $('#parsel .error').text('');
        
            $('#parsel .filter').fadeIn(500);
            $('#parsel .filter #parts').parent().addClass('selected');
            $('#parsel .result').fadeIn(500);
            
            fillParts(data.parts);
            $('#parsel .result pre').html(data.pre);
            $('#parsel .result .output').html(data.output);
            
            $('#parsel .parsel_slideshow_images').cycle({
                pager: '#parsel .parsel_slideshow_pager',
                next: $('#parsel .parsel_slideshow_next'),
                prev: $('#parsel .parsel_slideshow_prev')
            });
            
            $('#parts').live('click', function() {
                $('#parsel .filter .selected').removeClass('selected');
                $('#parsel .filter #parts').parent().addClass('selected');
                
                $('#parsel .result .code').fadeOut(500);
                $('#parsel .result .output').fadeOut(500, function() {
                    $('#parsel .result .parts').fadeIn(500);
                });
                
                return false;
            });
            
            $('#code').live('click', function() {
                $('#parsel .filter .selected').removeClass('selected');
                $('#parsel .filter #code').parent().addClass('selected');
                
                $('#parsel .result .parts').fadeOut(500);
                $('#parsel .result .output').fadeOut(500, function() {
                    $('#parsel .result .code').fadeIn(500);
                });
                
                return false;
            });
            
            $('#output').live('click', function() {
                $('#parsel .filter .selected').removeClass('selected');
                $('#parsel .filter #output').parent().addClass('selected');
                
                $('#parsel .result .code').fadeOut(500);
                $('#parsel .result .parts').fadeOut(500, function() {
                    $('#parsel .result .output').fadeIn(500);
                });
                                        
                return false;
            });
            
        } else {
            resetParsel();
            $('#parsel .error').html(data.message);
        }
    });


}

function fillParts(resp) {
    if (resp.operation)    $('#parsel .result .operation').text(resp.operation).addClass('has_value');
    else                   $('#parsel .result .operation').text("No operation");
    
    if (resp.object)       $('#parsel .result .object').text(resp.object).addClass('has_value');
    else                   $('#parsel .result .object').text("No object");
    
    if (resp.index)        $('#parsel .result .index').text(resp.index).addClass('has_value');
    else                   $('#parsel .result .index').text("No index");
    
    if (resp.params)       $('#parsel .result .parameters').text(resp.params).addClass('has_value');
    else                   $('#parsel .result .parameters').text("No parameters");
    
    if (resp.filter)       $('#parsel .result .filter').text(resp.filter).addClass('has_value');
    else                   $('#parsel .result .filter').text("No filter");
    
    if (resp.mode)         $('#parsel .result .mode').text(resp.mode).addClass('has_value');
    else                   $('#parsel .result .mode').text("No mode");
    
    if (resp.options) {
                           var options = "";
                           for (var i = 0; i < resp.options.length; i++) {
                               if (i == resp.options.length - 1)
                                   options += resp.options[i];
                               else
                                   options += resp.options[i] + ", ";
                           }
                           $('#parsel .result .options').addClass('has_value').text(options);
    }
    else                   $('#parsel .result .options').text("No options");
    
    if (resp.filter_group) $('#parsel .result .filter_group').text(resp.filter_group).addClass('has_value');
    else                   $('#parsel .result .filter_group').text("No filter");
    
    if (resp.filter_value) $('#parsel .result .filter_value').text(resp.filter_value).addClass('has_value');
    else                   $('#parsel .result .filter_value').text("No filter");
    
    if (resp.subset_group) $('#parsel .result .subset_group').text(resp.subset_group).addClass('has_value');
    else                   $('#parsel .result .subset_group').text("No subset group");
    
    if (resp.subset)       $('#parsel .result .subset').text(resp.subset).addClass('has_value');
    else                   $('#parsel .result .subset').text("No subset");
}

function resetParsel() {
    $('#parsel .filter').fadeOut(500);
    $('#parsel .result').fadeOut(500);
    $('#parsel .input .reset').fadeOut(500);
    $('#parsel .input input').val('');
    
    setTimeout(function() {
        $('#parsel .result .parts .value').each(function() {
            $(this).removeClass('has_value').text('');
        });
        
        $('#parsel .filter .selected').removeClass('selected');
        $('#parsel .result .code').html('').css('display', 'none');
        $('#parsel .result .output').html('').css('display', 'none');
        $('#parsel .result .parts').css('display', 'block');
        $('#parsel .error').text('');
    }, 500);
}

function updatePlaceholder() {
    var input = $('#parsel .input input');
    var placeholder = 'Try ' + placeholders[Math.floor(Math.random()*placeholders.length)];

    if (input.attr('placeholder') == placeholder)
        placeholder = 'Try ' + placeholders[Math.floor(Math.random()*placeholders.length)];
    
    input.attr('placeholder', placeholder);
}