"use strict";
var page = require('webpage').create();
var system = require('system');
var fs = require('fs');

var args = system.args;
var month = "UNKNOWN";
var day = "NA";
if (args.length < 3){
    console.log("The first argumet must be the name of the month");
    console.log("The second argument must be the day of the month");
}

var pathParts = args[0].split('/');
var path = '/';
if (pathParts.length > 1){
    pathParts.pop();
    path = pathParts.join('/');
}

month = args[1];
day = args[2];

page.clipRect = {
    top: 0,
    left: 0,
    width: 200,
    height: 200
  };

page.onConsoleMessage = function(msg) {
    console.log(msg);
  }
  
page.evaluate(function(month,day){
    window.month = month;
    window.day = day;
},month, day);


page.open(path + "/html/index.html",function(){
    page.evaluate(function(month,day){
        console.log(month);
        var event_back = document.getElementById('event_back');
        var event_back_loaded = false;
        var event_pageflip = document.getElementById('event_pageflip');
        var event_pageflip_loaded = false;

        var canvas = document.getElementById('canvas');
        canvas.width = 200;
        canvas.height = 200;
        var ctx = canvas.getContext('2d');

        //Background Image
        event_back.onload = function(){
            on_event_back_loaded();
        };
        function on_event_back_loaded(){
            if (!event_back_loaded){
                on_img_loaded();
                event_back_loaded = true;
            }            
        }
        if (event_back.height > 0){
            console.log("BACK");
            on_event_back_loaded();
        }
        //Page Flip Image
        event_pageflip.onload = function(){
            on_event_pageflip_loaded();
        };
        function on_event_pageflip_loaded(){
            if (!event_pageflip_loaded){
                on_img_loaded();
                event_pageflip_loaded = true;
            }            
        }
        if (event_pageflip.height > 0){
            on_event_pageflip_loaded();
        }

        var complete = false;
        function on_img_loaded(){
            
            if (!complete && event_back.height > 0 && event_pageflip.height > 0){
                console.log("on_img_loaded");
                document.body.style.margin = '0px';
                ctx.drawImage(event_back,0,0);
                ctx.fillStyle = "white";
                ctx.font = "25px Arial";
                ctx.textAlign = "center";
                ctx.fillText(month,canvas.width/2,32);

                ctx.fillStyle = "blue";
                ctx.font = "115px Arial";
                ctx.textAlign = "center";
                ctx.fillText(day,canvas.width/2,155);

                ctx.drawImage(event_pageflip,0,0);
                complete = true;
            }
        }
    },window.month, window.day);

    page.render(path + "/generated_images/" + month + "_" + day + ".png");
    phantom.exit();

});