(function(){
    'use strict';

    var targetElement = document.getElementById("content");

    var flag = {
            init: function(flagID, flagHTML) {
            	    this.flagfond = document.getElementById(flagID);
            	    this.flagHTML = flagHTML;
            },
            draw: function(target) {
            	    //document.getElementById("draw-irland");
            	    console.log("Drawing flag");
    	            target.innerHTML += this.flagHTML;
            }
};
    var flag1 = Object.create(flag);
    flag1.init("flag1", '<div class="flag irland"><div class="part1"></div><div class="part2"></div></div>');

    var flag2 = Object.create(flag); //Sverige
    flag2.init("flag2", '<div class="flag2 sverige"><div class="part1"></div><div class="part2"></div><div class="part3"></div><div class="part4"></div></div>'); //needs adding properties
    console.log(flag2);

    var flag3 = Object.create(flag); //Luxemburg
    flag3.init("flag3", '<div class="flag3 luxemburg"><div class="part1"></div><div class="part2"></div></div>');
    console.log(flag3);

    var flag4 = Object.create(flag); //Benin
    flag4.init("flag4", '<div class="flag4 benin"><div class="part1"></div><div class="part2"></div></div>');
    console.log(flag4);


var allFlags = [flag1, flag2, flag3, flag4];
//console.log(Object.keys(allFlags));

//allFlags.forEach(flag.draw());

for(var i=0; i <= allFlags.length; i++) {
	allFlags[i].draw(targetElement);
}
/*
    function drawFlagIrland() {
    	    var flagIrland = '<div class="flag irland"><div class="part1"></div><div class="part2"></div></div>';

    	    console.log("Drawing flag");
    	    flagTarget.innerHTML = flagIrland;
    }
    flagLink.addEventListener("click", function() {
    		    console.log("Event for clicking link Irland.");
    		    drawFlagIrland();
    });
*/
    console.log('Sandbox is ready!');
})();