var jCollage = null;
$(document).ready(function() {
    jCollage = new Collage("#collage");
    jCollage.setBackgroundColor("#fff");

    //laag selecteren door click
    $(".layers .layer").live("click", function() {
        $(".layers .layer").removeClass("selected");
        $(this).addClass("selected");
        setSettings($(this).attr("id").substr(6));
    });

    //achtergrond zichtbaar/onzichtbaar maken
    $(".layers .background .visible").click(function() {
        if ($(this).html() == "") {
            jCollage.setBackgroundImage($(".layers .background img")[0]);
            $(this).html("√");
        } else {
            jCollage.setBackgroundImage(null);
            $(this).html("");
        }
    });

    //laag zichtbaar/onzichtbaar maken
    $(".layers .layer .visible").live("click", function() {
        if ($(this).html() == "") {
            $(this).html("√");
        } else {
            $(this).html("");
        }
        jCollage.getLayer($(this).parent().attr("id").substr(6)).toggleVisible();
        jCollage.redraw();
    });

    //schaduw aan/uit zetten van geselecteerde laag
    $(".options select[name=shadow]").change(function() {
        if (getSelectedLayer() != null) {
            if ($(".options select[name=shadow]").val() == "true") {
                getSelectedLayer().setShadow(true);
            } else {
                getSelectedLayer().setShadow(false);
            }
            jCollage.redraw();
        }
    });

    //opacity wijzigen van geselecteerde laag
    $(".options select[name=opacity]").change(function() {
        if (getSelectedLayer() != null) {
            getSelectedLayer().setOpacity($(".options select[name=opacity]").val());
            jCollage.redraw();
        }
    });

    //geselecteerde laag verwijderen
    $(".remove").click(function() {
        if (getSelectedLayer() != null) {
            jCollage.removeLayer($(".layers .selected").attr("id").substr(6));
            updateLayers(jCollage.getLayers());
        }
    });

    //laag omhoog brengen
    $(".up").click(function() {
        if (getSelectedLayer() != null) {
            var selectedLayer = $(".layers .selected").attr("id").substr(6);
            if (jCollage.moveLayerUp(selectedLayer)) {
                updateLayers(jCollage.getLayers());
                $("#layer_" + (parseInt(selectedLayer) + 1)).addClass("selected");
            }
        }
    });

    //laag naar beneden brengen
    $(".down").click(function() {
        if (getSelectedLayer() != null) {
            var selectedLayer = $(".layers .selected").attr("id").substr(6);
            if (jCollage.moveLayerDown(selectedLayer)) {
                updateLayers(jCollage.getLayers());
                $("#layer_" + (parseInt(selectedLayer) - 1)).addClass("selected");
            }
        }
    });

    //foto van flickr.com zoeken door zoekwoord
    $(".search form.image-search").submit(function(){
        $(".search li").remove();
        $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags="+$(".search input[name=q]").val()+"&tagmode=any&format=json&jsoncallback=?",
            function(data) {
            $.each(data.items, function(i,item) {
                var img = $("<img/>").attr("src", item.media.m);
                img.attr("title", item.title);
                $("<li></li>").append(img).appendTo(".search ul");
                if ( i == 8 ) return false;
            });
        });
        return false;
    });

    //afbeelding uploaden van pc met html input field
    $("#uploader").change(function(e) {
      var reader = new FileReader();
      var title = e.target.value.replace(/.*[\\/]|(\.[^\.]+$)/g, "");
      reader.onload = function(event){
          var $img = $("<img/>").attr("src", event.target.result);
          jCollage.addLayer($img.get(0)).setTitle(title);
          updateLayers(jCollage.getLayers());
          $("#layer_" + (jCollage.getLayers().length - 1)).addClass("selected");
      }
      reader.readAsDataURL(e.target.files[0]);
  });

    //textlaag toevoegen
    $(".search form.text-layer").submit(function(){
        var fontFamily = $('.search form.text-layer select[name=font-family]').val();
        var fontColor = $('.search form.text-layer select[name=font-color]').val();
        var fontSize = parseInt($('.search form.text-layer select[name=font-size]').val());
        var text = $('.search form.text-layer input[name=text]').val();

        jCollage.addTextLayer(text, fontFamily, fontSize, fontColor);
        updateLayers(jCollage.getLayers());

        $("#layer_" + (jCollage.getLayers().length - 1)).addClass("selected");

        return false;
    });
});

//laag selecteren
function getSelectedLayer() {
    if ($(".layers .selected").length == 0) {
        return null;
    }
    return jCollage.getLayer($(".layers .selected").attr("id").substr(6))
}

//opacity en schaduw regelen
function setSettings(id) {
    var layer = jCollage.getLayer(id);
    $(".options select[name=opacity]").removeAttr("selected");
    $(".options select[name=opacity] option[value="+layer.getOpacity()+"]").attr("selected", "selected");

    $(".options select[name=shadow]").removeAttr("selected");
    $(".options select[name=shadow] option[value="+layer.hasShadow()+"]").attr("selected", "selected");
}

// layers updaten
function updateLayers(layers) {
    $(".layers li.layer").remove();
    for (i in layers) {
        $(".layers > ul").prepend(createLayerRow(i, layers[i]));
    }
}

//de toegevoegde laag aanmaken in de layers class
function createLayerRow(id, layer) {
    var row = $("<li></li>").addClass("layer").attr("id", "layer_" + id);
    if (layer instanceof Layer) {
        var icon = $("<img/>").attr("src", layer.getImage().src);
    }
    var heading = $("<h3></h3>").text(layer.getTitle().substr(0,14));
    var visible = $("<div></div>").addClass("visible");
    if (layer.isVisible()) {
        visible.html("&radic;");
    }

    row.append(icon).append(heading).append(visible);

    return row;
}