$(function() {

    var originalData = {

        show_editor: false,

        container: "preview"

    };

    var userData = {

        bins: [

            {

                type: "ResourceList",

                title: "Resource List",

                list: [

                    {

                        title: "IRI",

                        url: "http://www.iri.centrepompidou.fr/",

                        image: "http://www.iri.centrepompidou.fr/wp-content/themes/IRI-Theme/images/logo-iri-petit_fr_fr.png",

                        description: "Institut de Recherche et d'Innovation"

                    }

                ]

            }

        ],

        search: [

            {

                type: "Wikipedia",

                lang: "en"

            }

        ]

    };

    function getNormalizedHtml(jqsel) {

        return jqsel.html().replace(/[\r\n]/gm,' ').replace(/\s{2,}/g,' ').replace(/(^\s+|\s+$)/g,'');

    }

    var searchEngineTemplate = getNormalizedHtml($(".search-engine-list"));

    $(".search-engine-list").empty().sortable();

    var resourceTemplate = getNormalizedHtml($(".resource-list"));

    $(".resource-list").empty();

    var binTemplate = getNormalizedHtml($(".bin-list"));

    $(".bin-list").empty().sortable();

    function addSearchEngine(data, editMode) {

        $(".item").removeClass("item-editing");

        var element = $(searchEngineTemplate),

            allfields = element.find(".edit-value"),

            typefield = element.find(".search-engine-type .edit-value"),

            typedisplay = element.find(".search-engine-type .display-value"),

            langsection = element.find(".search-engine-language"),

            langfield = element.find(".search-engine-language .edit-value"),

            langdisplay = element.find(".search-engine-language .display-value");

        element.data("userdata",data);

        if (editMode) {

            element.addClass("item-editing");

        }

        var onChange = function() {

            data.type = typefield.val();

            typedisplay.text(typefield.find("[value=" + data.type + "]").text());

            if (data.type === "Wikipedia") {

                data.lang = langfield.val() || "en";

                langdisplay.text(langfield.find("[value=" + data.lang + "]").text());

                langsection.show();

            } else {

                delete data.lang;

                langsection.hide();

            }

        };

        typefield.val(data.type);

        if (data.type === "Wikipedia") {

            langfield.val(data.lang || "en");

        }

        allfields.on("keyup paste change", onChange);

        onChange();

        element.click(function() {

            $(".item").removeClass("item-editing");

            element.addClass("item-editing");

            return false;

        });

        element.find(".remove-item").click(function() {

            element.remove();

            return false;

        });

        $(".search-engine-list").append(element);

    }

    function addBin(data, editMode) {

        $(".item").removeClass("item-editing");

        var element = $(binTemplate),

            allfields = element.find(".edit-value"),

            typefield = element.find(".bin-type .edit-value"),

            typedisplay = element.find(".bin-type .display-value"),

            langsection = element.find(".bin-language"),

            langfield = langsection.find(".edit-value"),

            langdisplay = langsection.find(".display-value"),

            ldtsection = element.find(".ldt-options"),

            ldttypefield = element.find(".bin-ldt-type .edit-value"),

            ldttypedisplay = element.find(".bin-ldt-type .display-value"),

            ldtpffield = element.find(".bin-ldt-platform .edit-value"),

            ldtpfdisplay = element.find(".bin-ldt-platform .display-value"),

            ldtprojsection = element.find(".bin-ldt-project"),

            ldtprojfield = ldtprojsection.find(".edit-value"),

            ldtprojdisplay = ldtprojsection.find(".display-value"),

            kwsection = element.find(".bin-keyword"),

            kwfield = kwsection.find(".edit-value"),

            kwdisplay = kwsection.find(".display-value"),

            ressection = element.find(".bin-resources"),

            titlefield = element.find(".bin-title .edit-value"),

            titledisplay = element.find(".bin-title .display-value"),

            reslist = element.find(".resource-list");

        reslist.sortable({

            stop: updateListData

        });

        element.data("userdata",data);

        if (editMode) {

            element.addClass("item-editing");

        }

        var onChange = function() {

            data.type = typefield.val();

            typedisplay.text(typefield.find("[value=" + data.type + "]").text());

            if (data.type === "Wikipedia") {

                data.lang = langfield.val() || "en";

                langdisplay.text(langfield.find("[value=" + data.lang + "]").text());

                langsection.show();

            } else {

                delete data.lang;

                langsection.hide();

            }

            if (data.type === "Ldt") {

                ldtsection.show();

                data.ldt_type = ldttypefield.val() || "Results";

                ldttypedisplay.text(ldttypefield.find("[value=" + data.ldt_type + "]").text());

                data.ldt_platform = ldtpffield.val() || ldtpffield.val("http://ldt.iri.centrepompidou.fr/").val();

                ldtpfdisplay.text(data.ldt_platform);

                if (data.ldt_type === "Project") {

                    data.project_id = ldtprojfield.val();

                    ldtprojdisplay.text(data.ldt_project);

                    ldtprojsection.show();

                } else {

                    delete data.ldt_project;

                    ldtprojsection.hide();

                }

            } else {

                delete data.ldt_type;

                delete data.project_id;

                delete data.ldt_platform;

                ldtsection.hide();

            }

            if (data.type === "Wikipedia" || (data.type === "Ldt" && data.ldt_type === "Results")) {

                data.search = kwfield.val();

                kwdisplay.text(data.search);

                kwsection.show();

            } else {

                delete data.search;

                kwsection.hide();

            }

            if (data.type === "ResourceList") {

                data.title = titlefield.val() || titlefield.val("Untitled Resource List").val();

                titledisplay.text(data.title);

                ressection.show();

            } else {

                ressection.hide();

            }

            updateListData();

        };

        var updateListData = function() {

            if (data.type === "ResourceList") {

                data.list = Array.prototype.slice.call(

                    reslist.find(".resource").map(function(){return $(this).data("userdata");})

                );

            } else {

                delete data.list;

            }

        };

        var addResource = function(resdata, editmode) {

            var resel = $(resourceTemplate),

                all_fields = resel.find(".edit-value"),

                title_field = resel.find(".resource-title .edit-value"),

                title_text = resel.find(".resource-title .display-value"),

                url_field = resel.find(".resource-url .edit-value"),

                url_text = resel.find(".resource-url .display-value"),

                description_field = resel.find(".resource-description .edit-value"),

                description_text = resel.find(".resource-description .display-value"),

                image_field = resel.find(".resource-image .edit-value"),

                image_text = resel.find(".resource-image .display-value");

            resel.data("userdata",resdata);

            if (editmode) {

                resel.addClass("resource-editing");

            }

            var onResourceChange = function() {

                resdata.title = title_field.val();

                title_text.text(resdata.title);

                resdata.description = description_field.val();

                description_text.text(resdata.description);

                resdata.url = url_field.val();

                url_text.text(resdata.url);

                resdata.image = image_field.val();

                image_text.text(resdata.image);

                updateListData();

            };

            title_field.val( resdata.title || "" );

            url_field.val( resdata.url || "" );

            description_field.val( resdata.description || "" );

            image_field.val( resdata.image || "" );

            all_fields.on("keyup paste change", onResourceChange);

            onResourceChange();

            resel.find(".remove-item").click(function() {

                resel.remove();

                updateListData();

                return false;

            });

            resel.click(function() {

                $(".resource").removeClass("resource-editing");

                resel.addClass("resource-editing");

                return false;

            });

            reslist.append(resel);

        };

        if (data.list) {

            data.list.forEach(addResource);

        }

        typefield.val(data.type);

        if (data.type === "Wikipedia") {

            langfield.val(data.lang || "en");

        }

        if (data.type === "Ldt") {

            ldttypefield.val(data.ldt_type || "Results");

            ldtpffield.val(data.ldt_platform || "http://ldt.iri.centrepompidou.fr/");

            if (data.ldt_type === "Project") {

                ldtprojfield.val(data.ldt_project);

            }

        }

        if (data.type === "Wikipedia" || (data.type === "Ldt" && data.ldt_type === "Results")) {

            kwfield.val(data.search || "");

        }

        if (data.type === "ResourceList") {

            titlefield.val(data.title || "Untitled Resource List");

        }

        allfields.on("keyup paste change", onChange);

        onChange();

        element.click(function() {

            $(".item").removeClass("item-editing");

            element.addClass("item-editing");

            return false;

        });

        element.find(".remove-item").click(function() {

            element.remove();

            return false;

        });

        element.find(".add-resource").click(function() {

            addResource({"title": "New Resource"},true);

            return false;

        });

        $(".bin-list").append(element);

    }

    userData.search.forEach(function(data) {

        addSearchEngine(data,false);

    });

    userData.bins.forEach(function(data) {

        addBin(data,false);

    });

    $(".add-search-engine").click(function() {

        addSearchEngine({

            type: "Wikipedia",

            lang: "en"

        }, true);

        return false;

    });

    $(".add-bin").click(function() {

        addBin({

            type: "Wikipedia",

            lang: "en",

            search: ""

        }, true);

        return false;

    });

    $(".update-preview").click(function() {

        userData.search = Array.prototype.slice.call(

            $(".search-engine").map(function(){return $(this).data("userdata");})

        );

        userData.bins = Array.prototype.slice.call(

            $(".bin").map(function(){return $(this).data("userdata");})

        );

        new Rkns.Renkan(_.extend({}, originalData, userData));

    });

    new Rkns.Renkan(_.extend({}, originalData, userData));