/**
 * @original author casey (ravelry.com)
 * @modified by lolajl
 * @updated to sort projects in order, from newest to oldest
 */

function convertDate(date){
    var dateBits = date.split('-');
    return dateBits;
}

function formatDate(myDate){
    var dateBits = myDate.split('-');
    var ret = dateBits[1] + "/" + dateBits[0]
    return ret;
}

RavelryThing = function(){
    var progressData = null;
    
    // Dollar and Dollar E convenience
    var $ = function(id){
        return document.getElementById(id);
    };
    
    var $E = function(data){
        var el;
        if ('string' == typeof data) {
            el = document.createTextNode(data);
        }
        else {
            el = document.createElement(data.tag);
            delete (data.tag);
            if ('undefined' != typeof data.children) {
                for (var i = 0, child = null; 'undefined' != typeof(child = data.children[i]); i++) {
                    if (child) {
                        el.appendChild($E(child));
                    }
                }
                delete (data.children);
            }
            for (attr in data) {
                if (attr == 'style') {
                    for (s in data[attr]) {
                        el.style[s] = data[attr][s];
                    }
                }
                else 
                    if (data[attr]) {
                        el[attr] = data[attr];
                    }
            }
        }
        return el;
    };
    
    return {
        progressReceived: function(data){
            progressData = data;
        },
        
        
        /*
         Allowed options are: color, width, height. For example:
         drawProgressBars({color: 'red', width: 200, height: 20});
         */
        drawProgressBars: function(options){
            if (!progressData) 
                return;
            
            if (!options) 
                options = {};
            if ('number' == typeof options.height) 
                options.height += 'px';
            if (!options.height) 
                options.height = '1.3em';
            if (!options.width) 
                options.width = 150;
            if (!options.color) 
                options.color = '#008000';
            if (!options.container) 
                options.container = 'rav_progress_bars';
            
            var container = $(options.container);
            if (!container) {
                document.write("<div id='" + options.container + "'></div>");
                container = $(options.container);
            }
            
            /*
            this projectsByDate sorts the projects by the date started, 
            from newest to oldes 
            */
            var projectsByDate = {};
            var projectDates = [];
            for (var i = 0; i < progressData.projects.length; i++) {
                var project = progressData.projects[i];
                var date = project.started;
                if (!date) 
                    date = "";
                if (!projectsByDate[date]) {
                    projectsByDate[date] = new Array();
                    projectDates.push(date);
                }
                projectsByDate[date].push(project);
            }
            
            projectDates.sort().reverse();
            var selectedProjects = [];
            for (var i = 0; i < projectDates.length; i++) {
                var currentDate = projectsByDate[projectDates[i]];
                for (var j = 0; j < currentDate.length; j++) {
                    selectedProjects.push(currentDate[j]);
                }
            }
            
            for (var i = 0; i < selectedProjects.length; i++) {
                var project = selectedProjects[i];
                var filledStyle = {
                    width: Math.round((project.progress / 100) * options.width) + 'px',
                    height: options.height,
                    backgroundColor: options.color
                };
                var barStyle = {
                    width: (options.width) + 'px',
                    height: options.height
                };
                var className = 'rav_project'
                
                for (var i = 0; i < selectedProjects.length; i++) {
                    var project = selectedProjects[i];
                    var filledStyle = (selectedProjects[i].status == "hibernating") ? {
                        width: Math.round((project.progress / 100) * options.width) + 'px',
                        height: options.height,
                        backgroundColor: '#cccccc'
                    } : {
                        width: Math.round((project.progress / 100) * options.width) + 'px',
                        height: options.height,
                        backgroundColor: options.color
                    };
                    var barStyle = {
                        width: (options.width) + 'px',
                        height: options.height
                    };
                    var className = 'rav_project'
                    
                    // photo
                    var photo = null;
                    if (options.photos && project.thumbnail) {
                        className += ' rav_project_with_photos';
                        photo = {
                            tag: 'a',
                            target: '_blank',
                            className: 'rav_photo_link',
                            href: project.thumbnail.flickrUrl,
                            title: 'Open in Flickr',
                            children: [{
                                tag: 'img',
                                src: project.thumbnail.src
                            }]
                        };
                    }
                    
                    // title 
                    var title = null;
                    if (options.title != false) {
                        title = {
                            tag: 'a',
                            target: '_blank',
                            className: 'rav_title',
                            href: project.url,
                            title: 'Requires Ravelry login',
                            children: [project.name]
                        };
                    }
                    
                    // pattern
                    var pattern = null;
                    if (project.pattern) {
                        pattern = {
                            tag: 'div',
                            target: '_blank',
                            className: 'rav_pattern',
                            children: ['Pattern: ', {
                                tag: 'a',
                                target: '_blank',
                                href: project.pattern.url,
                                title: 'Requires Ravelry login',
                                children: [project.pattern.name]
                            }]
                        };
                    }
                    
                    // designer
                    var designer = null;
                    if (options.designer != false && project.pattern) {
                        designer = {
                            tag: 'a',
                            target: '_blank',
                            className: 'rav_designer',
                            href: project.pattern.designer.url,
                            title: 'Requires Ravelry login',
                            children: [' by ' + project.pattern.designer.name]
                        };
                    }
                    if (designer == null) {
                        // do the same stuff that you do for a designer except put your username and    / Raverlry profile URL in there instead of the stuff from project.pattern :)
                        designer = {
                            tag: 'a',
                            target: '_blank',
                            className: 'rav_designer',
                            href: "http://www.ravelry.com/people/lolajl",
                            title: 'Requires Ravelry login',
                            children: [' by Me']
                        };
                    }
                    
                    // started
                    var started = null;
                    if (options.started) {
                        //convert date to dd/mm/yy
                        var formattedStartDate = formatDate(project.started);
                        
                        started = {
                            tag: 'div',
                            className: 'rav_started',
                            children: ['Started: ' + formattedStartDate]
                        };
                    }
                    
                    // favorited 
                    var favs = null;
                    if (project.favorited > 0) {
                        favs = {
                            tag: 'div',
                            className: 'rav_favs',
                            children: [{
                                tag: 'a',
                                target: '_blank',
                                href: project.url + '/comments',
                                title: "Favorited in Ravelry",
                                children: [{
                                    tag: 'img',
                                    src: 'http://lolajl.net/blog/images/silk-heart.png'
                                }]
                            }, ' ' + project.favorited]
                        };
                    }
                    
                    //comments
                    var comments = null;
                    if (project.comments > 0) {
                        comments = {
                            tag: 'a',
                            className: 'rav_fc',
                            href: [project.url + '/comments'],
                            children: [{
                                tag: 'img',
                                src: 'http://www.lolajl.net/blog/images/silk-comment.png',
                            }, '' + project.comments]
                        };
                    }
                    
                    //yarns
                    var yarns = null;
                    if (options.yarns != false) {
                        var yarnsOutput = '';
                        if (project.yarns.length > 1) 
                            yarnsOutput += '';
                        yarnsOutput += '';
                        for (var j = 0; j < project.yarns.length; j++) {
                            if (j > 0) {
                                yarnsOutput += ",";
                            }
                            yarnsOutput += project.yarns[j].brand + ' - ' + project.yarns[j].name;
                        }
                        yarns = {
                            tag: 'div',
                            className: 'rav_yarn',
                            children: [' Yarn(s): ' + yarnsOutput]
                        };
                    }
                    
                    //ravlink
                    var ravlink = {
                        tag: 'div',
                        className: 'rav_link',
                        children: [{
                            tag: 'a',
                            target: '_blank',
                            href: project.url,
                            children: [{
                                tag: 'img',
                                src: 'http://www.lolajl.net/blog/images/rav.png'
                            }]
                        }]
                    };
                    
                    // title 
                    var title = null;
                    if (options.title != false) {
                        title = {
                            tag: 'a',
                            target: '_blank',
                            className: 'rav_title',
                            href: project.url,
                            children: [project.name]
                        };
                    }
                    
                    // generated code to display projects in order
                    container.appendChild($E({
                        tag: 'div',
                        className: className,
                        children: [photo, title, pattern, designer, yarns, favs, comments, {
                            children: [started, {
                                tag: 'div',
                                className: 'rav_progress_bar_wrapper',
                                style: barStyle,
                                children: [{
                                    tag: 'div',
                                    className: 'rav_progress_bar',
                                    style: barStyle,
                                    children: [{
                                        tag: 'div',
                                        className: 'rav_progress_filled',
                                        style: filledStyle
                                    }, {
                                        tag: 'div',
                                        className: 'rav_progress_text',
                                        style: barStyle,
                                        children: [project.progress + '%']                                   
                                    }]
                                }]
                            }]
                        }]
                    }));
                }
            }
        }
    }
}
();