/* global define */
define(['underscore', 'jquery', 'backbone',
        'models/metadata/eml211/EMLTemporalCoverage',
        'text!templates/metadata/dates.html'],
    function(_, $, Backbone, EMLTemporalCoverage, DatesTemplate){

        /**
        * @class EMLTempCoverageView
        * @classdesc The EMLTempCoverage renders the content of an EMLTemporalCoverage model
        * @classcategory Views/Metadata
        */
        var EMLTempCoverageView = Backbone.View.extend(
          /** @lends EMLTempCoverageView.prototype */{

        	type: "EMLTempCoverageView",

        	tagName: "div",

        	className: "row-fluid eml-temporal-coverage",

        	attributes: {
        		"data-category": "temporalCoverage"
        	},

        	template: _.template(DatesTemplate),

        	initialize: function(options){
        		if(!options)
        			var options = {};

        		this.isNew = options.isNew || (options.model? false : true);
        		this.model = options.model || new EMLTemporalCoverage();
        		this.edit  = options.edit  || false;

        	},

        	events: {
        		"change"   : "updateModel",
        		"focusout" : "showValidation",
        		"keyup input.error"    : "updateError",
        		"mouseover .remove"    : "toggleRemoveClass",
        		"mouseout  .remove"    : "toggleRemoveClass"
        	},

        	render: function(e) {
        		//Save the view and model on the element
        		this.$el.data({
        			model: this.model,
        			view: this
        		});

        		this.$el.append(this.template(this.model.toJSON()));

        		if(this.isNew){
        			this.$el.addClass("new");
        		}

        		return this;
        	},

        	/**
        	 * Updates the model
        	 */
        	updateModel: function(e){
        		if(!e) return false;

        		e.preventDefault();

        		//Get the attribute and value
        		var element   = $(e.target),
        			value     = element.val(),
        			attribute = element.attr("data-category");

            // Get the parent EML model
            var emlModel = this.model.getParentEML();
            //If a parent EML model was found, clean up the text for XML
            if( emlModel ){
              value = emlModel.cleanXMLText(value);
            }

        		//Get the attribute that was changed
        		if(!attribute) return false;

        		this.model.set(attribute, value);

        		if(this.model.isValid() && this.model.get("parentModel") && this.model.get("parentModel").type == "EML"){

        			this.notNew();

        			this.model.mergeIntoParent();
        			this.model.trickleUpChange();
        		}


        	},

        	/**
        	 * If the model isn't valid, show verification messages
        	 */
        	showValidation: function(e, options){


    			this.$el.find(".notification").empty();
    			this.$el.find(".error").removeClass("error");

    			//Validate the temporal coverage model
				if( !this.model.isValid() ){
					var errors = this.model.validationError;

					_.mapObject(errors, function(errorMsg, category){
						this.$el.find(".notification").addClass("error").append(errorMsg + " ");
						this.$el.find("[data-category='" + category + "']").addClass("error");
					}, this);
				}

        	},

        	/**
        	 * When the user is typing in an input with an error, check if they've fixed the error
        	 */
        	updateError : function(e){
        		var input = $(e.target);

        		if(input.val()){
        			input.removeClass("error");

        			//If there are no more errors, remove the error class from the view
        			if(!this.$(".error").length){
            			this.$(".notification.error").text("");
        				this.$el.removeClass("error");
        			}
        		}
        	},

        	/**
        	 * Highlight what will be removed when the remove icon is hovered over
        	 */
        	toggleRemoveClass: function(){
        		this.$el.toggleClass("remove-preview");
        	},

        	/**
        	 * Unmarks this view as new
        	 */
        	notNew: function(){
        		this.$el.removeClass("new");
        		this.isNew = false;
        	}
        });

        return EMLTempCoverageView;
    });