var colors= [
    '#a46868',
    '#73a468',
    '#9e68a4',
    '#a4a368',
    '#6873a4',
    '#515151',
    '#68a3a4',
    '#b4b4b4'
];

$(document).ready(function(){
    $('a.toggle').show().click(toggleContent);
    $('#scope').scope();
    $('#timeline-chart-1').gantt();
    $('#timeline-chart-2').gantt();
    $('#progress').progress();
    
    $('.four-col .col:nth-child(4n+1), .two-col .col:nth-child(2n+1)').addClass('new-row');
});


// Toggle Content
function toggleContent(){
    var t = $(this).parents('.db-sect');
    var s = t.attr('id');
    
    if (s == 'scope'){
        $('.toggle-content .col p', t).each(function(){
            $(this).toggle().parent('.col').toggleClass('collapsed');
        });
    } else if (s == 'progress'){
        $(this).parent('.col').toggleClass('.collapsed').find('.toggle-content').toggle();
    };
};


// Scope Section
$.fn.scope = function(){
    var t = $(this);
    
    $('#scope-chart').html('<table class="stacked-bar" cellspacing="0"><tr /></table>');
    
    $('#scope-data tr', t).each(function(){
        var i = $(this).index();
        var c = $(this).attr('class');
        var v = $('td', this).text().replace('%', '');
        
        //$('.col.' + c + ' span.percent', t).prepend(v);
        
        var newCell = '<td class="' + c + '" width="' + v + '%" style="background-color: ' + colors[i] + ';"></td>';
        $('.stacked-bar tr').append(newCell);
    });
    
    $('#scope-chart td').hover(function(){
        var c = $(this).attr('class');
        $(this).addClass('over');
        $('#scope .col.'+ c).addClass('over');
    }).mouseleave(function(){
        $(this).removeClass('over');
        $('#scope .four-col .over').removeClass('over');
    });
    
    $('a.toggle', t).click();
    
    $('#scope-chart table').click(function(){
        $('a.toggle', t).click();
    });
};


// Progress Section
$.fn.progress = function(){
    $('.col', this).each(function(){
        var column = $(this);
        var overallProgress;
        var values = new Array();
        
        // Preset big progress bar to 0
        $('.overall-progress', column).addClass('zero').css('width', 0).wrap('<div class="main-progress" />').wrapInner('<span class="percent" />');
        
        // Add type class for coloring
        var type = $('h3 small', column).text().replace('(', '').replace(')', '');
        column.addClass(type);
        
        // Append mini progress bars & gather values
        var num = 0;
        $('dl.breakout dt', column).each(function(){
            var v = $(this).next('dd').text().replace('%', '');
            var v = parseInt(v);
            var chart = '<dd class="mini-prog"><span style="width: ' + v + '%;"></span></dd>';
            
            $(this).after(chart);
            
            values[num] = v;
            num = num + 1;
        });
        
        // Calculate total of percentages
        var total = 0;
        for(var i = 0; i < values.length; i++){
         total += values[i];
        };
        
        if (total == 0){
            $('.toggle', column).click();
            overallProgress = 0;
        } else if (total != 0){
            var size = values.length;
            overallProgress = Math.round((total / (size * 100)) * 100);
            
            $('.overall-progress', column).removeClass('zero');
            
            
            // Set big progress bar & animate
            $('.overall-progress span.percent', column).text(overallProgress + '%');
            $('.overall-progress', column).animate({
                'width': overallProgress + '%'
            }, 2500);
        };
        
    });
};


// Timeline Charts
$.fn.gantt = function() {    
    var table = $('.datatable', this);
    var originalDates = new Array();
    var dates = new Array();
    var differences = new Array();
    var percentages = new Array();
    
    // Set initial value to today
    var startDate = '2/7/2011';
    originalDates[0] = startDate;
    
    // Drop all parsed dates into array(date)
    $('tr', table).each(function(){
        var i = $(this).index();
        var date = $('td', this).text();
        
        originalDates[i + 1] = date;
    });
    
    $.each(originalDates, function(index, value) {
        dates[index] = parseDate(value);
    });
    
    // Calculate difference of days between each entry in array(date)
    $.each(dates, function(index, value) {
        var prev = dates[index - 1];
        var diff = Math.round(daydiff(prev, value));
        differences[index] = diff;
    });
    
    // Remove first entry in array(differences) as it is NaN
    originalDates.shift();
    differences.shift();
    
    // Calculate total number of days for project
    var total = 0;
    for(var i = 0; i < differences.length; i++){
     total += differences[i];
    }
    
    // Caculate percentages & add to array(percentages)
    $.each(differences, function(index, value) {
        percentages[index] = Math.round(value/total*100);
    });
    
    table.after('<table class="gantt" cellspacing="0" />');
    var ganttChart = $('table.gantt', this);
    
    var numEntries = percentages.length;
        
    $('tr', table).each(function(){
        var i = $(this).index();
        var oneLess = numEntries - 1;
        
        if(i != 0 && i != oneLess){
            var ni = i + 1;
            var remaining = numEntries - ni;
            var before = '<td class="before" colspan="' + i + '"></td>';
            var after = '<td class="after" colspan="' + remaining + '"></td>';
        } else if (i == 0){
            var before = '';
            var after = '<td class="after" colspan="' + oneLess + '"></td>';
        } else if (i == oneLess){
            var before = '<td class="before" colspan="' + oneLess + '"></td>';
            var after = '';
        };
        
        var newRow = '<tr>' + before + '<td class=bar" width="' + percentages[i] + '%"><span style="background-color: ' + colors[i] + '; height:12px; display:block;"></span></td>' + after + '</tr>';
        
        ganttChart.append(newRow);
    });
    
    ganttChart.append('<tr class="axis" />');
    
    $.each(originalDates, function(index, value){
        var labelCell = '<td>' + value + '</td>';
        $('.axis', ganttChart).append(labelCell);
    });
    
    $('td', table).remove();
    table.show();
};

function parseDate(str) {
    var mdy = str.split('/')
    return new Date(mdy[2], mdy[0]-1, mdy[1]);
}

function daydiff(first, second) {
    return (second-first)/(1000*60*60*24)
}