(function(){
    'use strict';

    //var flagTarget = document.getElementById("flag");
    var flagLink = document.getElementById("draw-irland");

    var flag = {
            init: function(flagID, flagHTML) {
            	    this.flagfond = document.getElementById(flagID);
            	    this.flagHTML = flagHTML;
            },
            draw: function() {
            	    document.getElementById("draw-irland");
            	    console.log("Drawing flag");
    	            flagTarget.innerHTML = flagIrland;
            },
            /*
            clickToShow: flagLink.addEventListener("click", function() { //addEvenListener() i en loop med alla objekt i en array?
    		    console.log("Event for clicking link Irland."); //allFlags.forEach(object)...addEventListener?
    		    flag.fond() {
    		    	    return flagfond;
    		    }
    		    var flagTarget += flagfonds;
    		    flagTarget.innerHTML = flag;

    	    })
    	    */
};

/*
var testElements = document.getElementsByClassName('test');
var testDivs = Array.prototype.filter.call(testElements, function(testElement){
    return testElement.nodeName === '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.clickToShow());

    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.clickToShow());

    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.clickToShow());


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

for(var i=0; i <= allFlags.length; i++) {
	console.log(allFlags[i]);
}
/*
    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();
    });

    flagTarget = document.getElementById("flag2");
    flagLink = document.getElementById("draw-sverige");


    function drawFlagSverige() {
    	    var flagSverige = '<div class="flag2 sverige"><div class="part1"></div><div class="part2"></div><div class="part3"></div><div class="part4"></div></div>';

    	    console.log("Drawing flag2");
    	    flagTarget.innerHTML = flagSverige;
    }
    flagLink.addEventListener("click", function() {
    		    console.log("Event for clicking link Sverige.");
    		    drawFlagSverige();
    });

    flagTarget = document.getElementById("flag3");
    flagLink = document.getElementById("draw-luxemburg");

    //skum positionering?
    function drawFlagLuxemburg() {
    	    var flagLuxemburg = '<div class="flag3 luxemburg"><div class="part1"></div><div class="part2"></div></div>';

    	    console.log("Drawing flag3");
    	    flagTarget.innerHTML = flagLuxemburg;
    }
    flagLink.addEventListener("click", function() {
    		    console.log("Event for clicking link Luxemburg.");
    		    drawFlagLuxemburg();
    });

    flagTarget = document.getElementById("flag4");
    flagLink = document.getElementById("draw-benin");

    //skum positionering?
    function drawFlagBenin() {
    	    var flagBenin = '<div class="flag4 benin"><div class="part1"></div><div class="part2"></div></div>';

    	    console.log("Drawing flag4");
    	    flagTarget.innerHTML = flagBenin;
    }
    flagLink.addEventListener("click", function() {
    		    console.log("Event for clicking link Benin.");
    		    drawFlagBenin();
    });
*/
    console.log('Sandbox is ready!');
})();