/**
 * Created by James on 2017-02-25.
 */
window.addEventListener("load", init);

function init() {
    // Event Listeners

    // box1 event Listener
    var box1 = document.getElementById("box1");
    box1.addEventListener("click", box1_color);

    // box 3
    var box3 = document.getElementById("box3");
    box3.addEventListener("click", box3_click);

    // box 4
    var box4 = document.getElementById("box4");
    box4.addEventListener("click", box4_click);

    // box 2
    var box2 = document.getElementById("box2");
    box2.addEventListener("dragstart", box2_dragstart);
    box2.setAttribute("draggable", true);

    // box 5
    var box5 = document.getElementById("box5");
    box5.addEventListener("drop", box5_drop);
    box5.addEventListener("drop", box5_dragover);
}

    // Global Variables
    var last_color = 0 ; // bit 2 is red, bit 1 is green, bit 0 blue
    var counter = 0 ;  // counter variable
    var bcolor = 0 ;  // page bg color: 0 for black 1 is white

    // Writing box1_color(evt)
   function box1_color()
   {
        if(last_color == 8)
        {
            last_color = 0 ;
        }

       last_color++;

       var color_to_set = "#";
       color_to_set += (last_color & 4) ? '0' : 'F';
       color_to_set += (last_color & 2) ? '0' : 'F';
       color_to_set += (last_color & 1) ? '0' : 'F';

       var bcolor_to_set = "#";
       bcolor_to_set += (last_color & 4) ? 'F' : '0';
       bcolor_to_set += (last_color & 2) ? 'F' : '0';
       bcolor_to_set += (last_color & 1) ? 'F' : '0';

       this.style.backgroundColor = bcolor_to_set;
       this.style.color = color_to_set;

       last_color++;
   }

   function box3_click()
   {
       this.innerHTML = "<p>Count = " + counter + ".</p>";
       counter++;
   }

   // Writing box4_click() @@@ <<<
   function box4_click()
   {
        if(bcolor == 0)
        {
            document.documentElement.style.backgroundColor = "#000";
            bcolor = 1;
        }
        else if(bcolor == 1)
        {
            document.documentElement.style.backgroundColor = "#FFF";
            bcolor = 0 ;
        }
   }


function box2_dragstart(evt)
{
    evt.dataTransfer.setData("text/plain",counter);
}

function box5_drop(evt)
{
    evt.preventDefault(); // turns off default event processing for the target element
    var data = evt.dataTransfer.getData("text/plain");
    this.innerHTML = "counter =" + data ;
}

function box5_dragover(evt)
{
    evt.preventDefault();
}