/*
  Copyright (c) 2006-2010, ePages GmbH
  All Rights Reserved.

  epages.cartridges.de_epages.product.widget.ProductTypeAttributeList $Revision: 1.36 $

*/
dojo.provide("epages.cartridges.de_epages.product.widget.ProductTypeAttribute");
dojo.require("epages.widget.LocalizedWidget");
dojo.require('epages.template');
epages.require('ep_shop_upload', 'epages.uploader');

dojo.declare("epages.cartridges.de_epages.product.widget.ProductTypeAttribute",
  [epages.widget.LocalizedWidget], {

    /**
     * public properties
     */
    alias             : "",											// string - attribute alias
    name              : "",											// string - attribute name (current language)
    data              : undefined,							// hash   - attribute data (very complex)
    attributeListId   : "",											// string - widget id of attribute list widget
    attributeNumber   : undefined,							// integer - number indentifier for the attribute
    productObjectID   : '',											// integer - object id of the product/resource

    /**
     * widget properties
     */
    templatePath      : dojo.moduleUrl('epages.cartridges.de_epages.product.widget', "templates/ProductTypeAttribute.html"),
    translationName   : dojo.moduleUrl('epages.cartridges.de_epages.product.widget', 'templates/translation'),

    /**
     * private properties
     */
    _attributeContainerTemplate    : '',         // string - attribute value container template
    _attributeTemplateMapping      : undefined,  // object - attribute value template mapping (will be filled later onPostMixInProperies)
    _deleteRowTemplate             : '',         // string - delete icon of a row template
    _fileValueTemplate             : '',         // string - template for file values
    _moreLanguagesContent          : '',         // string - more languages link template

    _rowNodes                      : undefined,  // hash - hash with row dom nodes e.g. { <rowid> : <domnode> }
    _languageContainerNodes        : undefined,  // hash - hash with language container dom nodes e.g. { <rowid> : <domnode> }
    _moreLaguagesNodes             : undefined,  // hash - hash with more languages link dom nodes e.g. { <rowid> : <domnode> }
    _deleteRowNodes                : undefined,  // hash - hash with delte row dom nodes e.g. { <rowid> : <domnode> }

    _rowCount                      : 0,          // integer - count of attribute value rows (consecutive  number / delteting a row won't decrease this number)

    _ep_connects                   : undefined,  // hash   - collection of connected events e.g. { <rowid> : <connected_event> }
    _ep_childWidgets               : undefined,  // hash   - collection of inner widgets e.g. { <rowid> : <widgets> }


    /**
     * widget life cycle
     */

    postMixInProperties: function(){
      this.inherited("postMixInProperties", arguments);
      // throw warnings
      if(!epages.vars.languages) {
        console.warn("epages.vars.languages not defined in "+this.declaredClass );
      }

      if(!epages.vars.Locale.languageId) {
        console.warn("epages.vars.Locale.languageId not defined in "+this.declaredClass );
      }

      if(epages.vars.features) {
        if(! epages.vars.features.ProductTypes) {
          console.warn("epages.vars.features.ProductTypes not defined in "+this.declaredClass );
        }
      } else {
        console.warn("epages.vars.features not defined in "+this.declaredClass );
      }

      if(! epages.vars.maxFileSize) {
        console.warn("epages.vars.maxFileSize not defined in "+this.declaredClass);
      }

      if(! epages.vars.defaultTypePackage) {
        console.warn("epages.vars.defaultTypePackage not defined in "+this.declaredClass);
      }

      // prepare templates / init vars
      this._setTemplates();
      this._ep_connects = {};
      this._ep_childWidgets = {};
      this._moreLaguagesNodes = {};
      this._languageContainerNodes = {};
      this._deleteRowNodes = {};
      this._rowNodes = {};
    },

    postCreate: function(){
      this.inherited("postCreate", arguments);

      if(this.productObjectID && (this.attributeNumber !== undefined)) {
        this.newAttributeNameNode.name = this.productObjectID + ':VariationAttributeName'+this.attributeNumber;
        this.newAttributeUsageNode.name = this.productObjectID + ':UseAttribute'+this.attributeNumber;
        this.newAttributeTypeNode.name = this.productObjectID + ':TypePackage'+this.attributeNumber;
        this.newAttributeIsVisibleNode.name = this.productObjectID + ':VariationAttributeIsVisible'+this.attributeNumber;
      }

      var attrData = this.data;

      if(attrData) {
        this._createAttributeValueNodes(attrData, true);

        if(attrData.isPreDefAttributesContainer) {																				// append new editable entry for new attribute values
          this._createNewRow();
          this.addNewPredefValueNode.style.display="";
        }
        // change type package option and select it
        this.newAttributeTypeNode.children[0].value = attrData.type;
        this.newAttributeNameNode.value = this.alias;
      } else { // attribute is new
        this.existingAttributeViewNode.style.display="none";
        this.newAttributeNameNode.disabled=false;
        this.newAttributeTypeNode.disabled=false;

        // fill attribute types
        for(var el in epages.vars.defaultTypePackage) {
          var data = epages.vars.defaultTypePackage[el];
          var selectNode= document.createElement("option");
          selectNode.value = el;
          selectNode.innerHTML = data.type_name;
          this.newAttributeTypeNode.appendChild(selectNode);
        }
        this.newAttributeViewNode.style.display="block";
      }


    },

    destroy: function() {
      this._destroyAttributeValues();
      dojo.publish(this.attributeListId+'/attributeRemoved', []);
      this.inherited("destroy", arguments);
    },

    /**
     * init functions
     */

    _setTemplates : function() {
    // summary: set template strings
    // description:
      /**
       * ==============================
       * this._attributeTemplateMapping
       * ==============================
       *
       * hash properties
       * locked       - only attribute values can be edited / predefined values can not be edited -> locked
       * lockedTransl - display translation only / can not be edited
       * edit - attribute values and predefined values can be edited
       * editTransl - attribute values and predefined values can be edited (other languages)
       *
       * placeholders
       * (%attribute_value%)   -> value of attribute
       * (%attribute_name%)    -> inputfield name for attribute (<attribute alias>:<langid>)
       * (%attribute_checked1%)-> inputfield checked string for yes radio buttons (Boolean)
       * (%attribute_checked0%)-> inputfield checked string for no radio buttons (Boolean)
       * (%attribute_file%)    -> link html for uploaded files (File, LocalizedFile)
       * (%predef_name%)       -> inputfield name for predfined choice (alias of predef choice)
       * (%predef_value%)      -> value of predef choice (e.g. name of choice)
       * (%predef_id%)         -> ObjectID of predefined choice
       * (%predef_checked%)    -> predefined choice is selected
       */

      this._attributeTemplateMapping = {
        'String'                     :	{	edit          : '<input type="text" name="AttributeName" value="(%attribute_value%)" />',
                                          locked        : '<input type="text" name="AttributeName" value="(%attribute_value%)" />'
                                        },
        'LocalizedString'            : 	{	edit          : '<input type="text" name="AttributeName:(%langid%)" value="(%attribute_value%)" /> (%native%)',
                                          locked        : '<input type="text" name="AttributeName:(%langid%)" value="(%attribute_value%)" /> (%native%)'
                                        },
        'PreDefString'               :	{	edit          : '<input type="radio" name="RadioAttributeName" value="(%attribute_value%)" (%predef_checked%) /> <input type="text" name="AttributeName" value="(%predef_value%)" />',
                                          locked        : '<input type="radio" name="RadioAttributeName" value="(%attribute_value%)" (%predef_checked%) id="(%attribute_name%)(%predef_id%)" /> <label for="(%attribute_name%)(%predef_id%)">(%predef_value%)</label>'
                                        },
        'PreDefLocalizedString'      :	{	edit          : '<input type="radio" name="RadioAttributeName:(%langid%)" value="(%attribute_value%)" (%predef_checked%) /> <input type="text" name="AttributeName:(%langid%)" value="(%predef_value%)" /> (%native%)',
                                          editTransl    : '<span class="RadioSpacer"></span> <input type="text" name="AttributeName:(%langid%)" value="(%predef_value%)" /> (%native%)',
                                          locked        : '<input type="radio" name="RadioAttributeName:(%langid%)" value="(%attribute_value%)" (%predef_checked%) id="(%attribute_name%)(%predef_id%)" /> <label for="(%attribute_name%)(%predef_id%)">(%predef_value%)</label>'
                                        },
        'PreDefMultiString'          :	{	edit          : '<input type="checkbox" name="CheckboxAttributeName:(%langid%)" value="(%attribute_value%)" (%predef_checked%) /> <input type="text" name="AttributeName" value="(%predef_value%)" />',
                                          editTransl    : '<span class="CheckboxSpacer"></span> <input type="text" name="AttributeName" value="(%predef_value%)" />',
                                          locked        : '<input type="checkbox" name="CheckboxAttributeName:(%langid%)" value="(%attribute_value%)" (%predef_checked%) id="(%attribute_name%)(%predef_id%)" /> <label for="(%attribute_name%)(%predef_id%)">(%predef_value%)</label>'
                                        },
        'PreDefMultiLocalizedString' :	{	edit          : '<input type="checkbox" name="CheckboxAttributeName" value="(%attribute_value%)" (%predef_checked%) /> <input type="text" name="AttributeName:(%langid%)" value="(%predef_value%)" /> (%native%)',
                                          editTransl    : '<span class="CheckboxSpacer"></span> <input type="text" name="AttributeName:(%langid%)" value="(%predef_value%)" />',
                                          locked        : '<input type="checkbox" name="CheckboxAttributeName" value="(%attribute_value%)" (%predef_checked%) id="(%attribute_name%)(%predef_id%)" /> <label for="(%attribute_name%)(%predef_id%)">(%predef_value%)</label>'
                                        },
        'PreDefCustomerString'       :	{	edit          : '<input type="checkbox" name="CheckboxAttributeName" value="(%attribute_value%)" (%predef_checked%) /> <input type="text" name="AttributeName:(%langid%)" value="(%predef_value%)" /> (%native%)',
                                          editTransl    : '<span class="RadioSpacer"></span> <input type="text" name="AttributeName:(%langid%)" value="(%predef_value%)" />',
                                          locked        : '<input type="checkbox" name="CheckboxAttributeName" value="(%attribute_value%)" (%predef_checked%) id="(%attribute_name%)(%predef_id%)" /> <label>(%predef_value%)</label>'
                                        },
        'Integer'                    :	{	edit          : '<input type="text" name="AttributeName" value="(%attribute_value%)" />',
                                          locked        : '<input type="text" name="AttributeName" value="(%attribute_value%)" />'
                                        },
        'Float'                      :	{	edit          : '<input type="text" name="AttributeName" value="(%attribute_value%)" />',
                                          locked        : '<input type="text" name="AttributeName" value="(%attribute_value%)" />'
                                        },
        'Boolean'                    :	{	edit          : '<input type="radio" name="AttributeName_'+this.attributeNumber+'" value="1" id="BoolAttr_'+this.attributeNumber+'_1" (%attribute_checked1%) /><label for="BoolAttr_'+this.attributeNumber+'_1">'+this.translate("Yes")+'</label><input type="radio" name="AttributeName_'+this.attributeNumber+'" value="0" id="BoolAttr_'+this.attributeNumber+'_0" (%attribute_checked0%) /><label for="BoolAttr_'+this.attributeNumber+'_0">'+this.translate("No")+'</label>',
                                          locked        : '<input type="radio" name="AttributeName_'+this.attributeNumber+'" value="1" id="BoolAttr_'+this.attributeNumber+'_1" (%attribute_checked1%) /><label for="BoolAttr_'+this.attributeNumber+'_1">'+this.translate("Yes")+'</label><input type="radio" name="AttributeName_'+this.attributeNumber+'" value="0" id="BoolAttr_'+this.attributeNumber+'_0" (%attribute_checked0%) /><label for="BoolAttr_'+this.attributeNumber+'_0">'+this.translate("No")+'</label>'
                                        },
        'Money'                      :	{	edit          : '<input type="text" name="AttributeName" value="(%attribute_value%)" />',
                                          locked        : '<input type="text" name="AttributeName" value="(%attribute_value%)" />'
                                        },
        'DateTime'                   :	{	edit          : '<input type="text" name="AttributeName" value="(%attribute_value%)" class="ep-date-time-input" selector="datetime" />',
                                          locked        : '<input type="text" name="AttributeName" value="(%attribute_value%)" class="ep-date-time-input" selector="datetime" />'
                                        },
        'Date'                       :	{	edit          : '<input type="text" name="AttributeName" value="(%attribute_value%)" class="ep-date-input" selector="date" />',
                                          locked        : '<input type="text" name="AttributeName" value="(%attribute_value%)" class="ep-date-input" selector="date" />'
                                        },
        'Time'                       :	{	edit          : '<input type="text" name="AttributeName" value="(%attribute_value%)" class="ep-time-input" selector="time" />',
                                          locked        : '<input type="text" name="AttributeName" value="(%attribute_value%)" class="ep-time-input" selector="time" />'
                                        },
        'File'                       :	{	edit          : '(%attribute_file%) <input type="text" name="AttributeName" id="DisplayFileName_Attr'+this.attributeNumber+'_(%langid%)" class="Disabled FloatLeft" value="" /> (%attribute_uploader%) <div class="Smaller AdditionalInfo">'+this.translate("MaxFileSize")+': '+epages.vars.maxFileSize+' MByte</div>',
                                          locked        : '(%attribute_file%) <input type="text" name="AttributeName" id="DisplayFileName_Attr'+this.attributeNumber+'_(%langid%)" class="Disabled FloatLeft" value="" /> (%attribute_uploader%) <div class="Smaller AdditionalInfo">'+this.translate("MaxFileSize")+': '+epages.vars.maxFileSize+' MByte</div>'
                                        },
        'LocalizedFile'              :	{	edit          : '(%attribute_file%) <input type="text" name="AttributeName:(%langid%)" id="DisplayFileName_Attr'+this.attributeNumber+'_(%langid%)" class="Disabled FloatLeft" value="" /> (%attribute_uploader%) (%native%) <div class="Smaller AdditionalInfo BottomMarginWide">'+this.translate("MaxFileSize")+': '+epages.vars.maxFileSize+' MByte</div>',
                                          locked        : '(%attribute_file%) <input type="text" name="AttributeName:(%langid%)" id="DisplayFileName_Attr'+this.attributeNumber+'_(%langid%)" class="Disabled FloatLeft" value="" /> (%attribute_uploader%) (%native%) <div class="Smaller AdditionalInfo BottomMarginWide">'+this.translate("MaxFileSize")+': '+epages.vars.maxFileSize+' MByte</div>'
                                        }
      };

      this._attributeContainerTemplate    = '(%inputhtml%) (%deleteRowTemplate%) (%moreLanguagesContent%)';
      this._deleteRowTemplate             = '<i class="Sprite ico_s_delete ClickIcon" epAttachPoint="deleteRowNode" title="'+this.translate('DeleteRow')+'"></i>';
      this._moreLanguagesContent          = '<span class="ChangeLink Smaller" epAttachPoint="moreLaguagesNode">(<a href="#" onclick="return false">'+this.translate("MoreLanguages")+'</a>)</span><div epAttachPoint="languageContainerNode" style="display:none"></div>';
      this._fileUploadTemplate            = '<input type="file" dojoAttachpoint="uploadAppletNode" id="'+this.attributeNumber+'_(%langid%)" class="ep-js" data-js="'+
                          "de_epages.presentationUiUploader({"+
                            "data:{"+
                              "ChangeAction:'UploadFiles',"+
                              "UseMediaGallery:0,"+
                              "ObjectID:"+this.productObjectID+
                            "},"+
                            "callback:function(data){"+
                              "if( data = data[ data.length-1 ].success ){"+
                                "jQuery('#DisplayFileName_Attr"+this.attributeNumber+"_(%langid%)')"+
                                  ".val(data.uploadedObjectFile);"+
                              "}"+
                            "}"+
                          "})"+
                          ".parent()"+
                          ".addClass('FloatLeft EnableHover')"+
                          '"/>';
      this._fileValueTemplate             = '<span class="Smaller" id="Link_Attr'+this.attributeNumber+'_(%langid%)"><a target="_blank" href="(%file%)">(%value%)</a>'+
                                            '<span dojoType="epages.widget.DeleteFileOnServer" '+
                                            '      class="LeftMarginWide"'+
                                            '      fileAttribute="(%attribute_alias%)"'+
                                            '      languageId="(%langid%)"'+
                                            '      filePath="(%file%)"'+
                                            '      fileName="(%value%)"'+
                                            '      confirm="1"'+
                                            '      objectId="(%product_id%)"'+
                                            '      onsuccess="dojo.addClass($(\'Link_Attr'+this.attributeNumber+'_(%langid%)\'),\'HideElement\');" ></span></span><br />';
    },

    /**
     * build functions
     */

    _createAttributeValueNodes : function(attributeData, islocked) {
    // summary: generate nodes and event handler of attribute values
      if(attributeData.preDefAttributes !== undefined || !attributeData.isPreDefAttributesContainer) {	// skip PreDefAttributesContainer without predefined attributes
        // init vars
        var currentLanguageId = epages.vars.Locale.languageId;
        var attrValueHtml = "";

        // choose template version (locked or edit version)
        var attrValueTemplate = (islocked) ? this._attributeTemplateMapping[attributeData.type].locked :	this._attributeTemplateMapping[attributeData.type].edit;

        // calculate number of iterations
        var numberOfLoops = 1;
        var countPredefAttributes = 0;
        if(attributeData.preDefAttributes) {
          countPredefAttributes = attributeData.preDefAttributes.length;
          numberOfLoops = countPredefAttributes;																					// change number of iterations to number of predfined attribute values
        }

        // iterate
        for(var i = 0; i< numberOfLoops; i++) {																						// multiple choices are needed by any preDefAttribute type
          // prepare container template (localized or not)

          attrValueHtml = this._attributeContainerTemplate;

          // generate input html code for current language
          var predefined = (countPredefAttributes) ? attributeData.preDefAttributes[i] : undefined;
          var predefValueKey = "value"+':'+currentLanguageId;
          var attributeValue= "";
          var attributeIsChecked1 = "";
          var attributeIsChecked0 = "";

          if(attributeData.value !== undefined) {
            attributeValue = attributeData.value;

            if(attributeData.value) {
              attributeIsChecked1 = 'checked="checked"';
            } else {
              attributeIsChecked0 = 'checked="checked"';
            }

          } else if(attributeData['value:'+currentLanguageId]) {
            attributeValue = attributeData['value:'+currentLanguageId];
          }

          var predefIsChecked = "";
          if(attributeData.values) {
            for(var el in attributeData.values) {
              if(attributeData.values[el] == predefined.id) {
                predefIsChecked='checked="checked"';
              }
            }
          }

          var attributeFile = "";
          if(attributeData.file) {
            var fileTmpl = $TMPL(this._fileValueTemplate, {
              attribute_alias : this.alias,
              attribute_id    : attributeData.id,
              langid          : currentLanguageId,
              file            : attributeData.file,
              value           : attributeData.value,
              product_id      : attributeData.productId
            }, false);
            attributeFile = fileTmpl.generateOutput();
          }

          var uploader = "";
          var uploadTmpl = $TMPL(this._fileUploadTemplate, {
            attribute_alias : this.alias,
            attribute_id    : attributeData.id,
            langid          : currentLanguageId,
            file            : attributeData.file,
            value           : attributeData.value,
            product_id      : attributeData.productId
          }, false);
          uploader = uploadTmpl.generateOutput();

          if(attributeData['file:'+currentLanguageId]) {
            var fileTmpl = $TMPL(this._fileValueTemplate, {
              attribute_alias : this.alias,
              attribute_id    : attributeData.id,
              langid          : currentLanguageId,
              file            : attributeData['file:'+currentLanguageId],
              value           : attributeData['value:'+currentLanguageId],
              product_id      : attributeData.productId
            }, false);
            attributeFile = fileTmpl.generateOutput();
          }

          var inputHtml = this._createInput({
            templatestring    : attrValueTemplate,
            alias             : this.alias,
            langid            : currentLanguageId,
            predef_name       : (predefined) ? predefined.alias : undefined,
            predef_id         : (predefined) ? predefined.id : undefined,
            predef_value      : (predefined) ? predefined[predefValueKey] : undefined,
            predef_checked    : predefIsChecked,
            attribute_value   : attributeValue,
            attribute_checked1: attributeIsChecked1,
            attribute_checked0: attributeIsChecked0,
            attribute_file    : attributeFile,
            attribute_id      : attributeData.id,
            attribute_uploader: uploader
          });

          var moreLanguagesContentHtml = (attributeData.isLocalized && !(attributeData.isPreDefAttributesContainer && islocked)) ? this._moreLanguagesContent : "";		// don't show translations on locked predfined rows
          var deleteRowTemplateHtml = (!islocked) ? this._deleteRowTemplate : "";																				// don't show delete button on locked rows

          var attrValueHtml = $TMPL(attrValueHtml , {
            inputhtml : inputHtml,
            moreLanguagesContent : moreLanguagesContentHtml,
            deleteRowTemplate: deleteRowTemplateHtml
          }, false).generateOutput();

          // generate and insert as node (insert row)
          var attributeValueNode = document.createElement("div");
          attributeValueNode.innerHTML = attrValueHtml;
          if(islocked && predefined && predefined.id) {
            dojo.attr(attributeValueNode, "predefobjectid", predefined.id);
          }
          this._rowNodes[this._rowCount] = attributeValueNode;																													// save row dom node refernce
          this.valueContainerNode.appendChild(attributeValueNode);																											// append

          // append events (delete button)
          this._ep_connects[this._rowCount] = {};
          if(!islocked) {																																																//  locked rows can not be deleted
            var deleteRowNodeNodeArray= dojo.query('[epAttachPoint=deleteRowNode]',attributeValueNode);
            if(deleteRowNodeNodeArray.length) {
              this._deleteRowNodes[this._rowCount] = deleteRowNodeNodeArray[0];
              this._deleteRowNodes[this._rowCount].setAttribute("ep_rowcount", this._rowCount);
              this._ep_connects[this._rowCount]['deleteRowNode'] = dojo.connect(this._deleteRowNodes[this._rowCount], "onclick", this, "_onDeleteRow");
            }
          }

          // generate inputs -> other languages (except predefined locked rows)
          if(attributeData.isLocalized && !(attributeData.isPreDefAttributesContainer && islocked)) {
            var nodeArray= dojo.query('[epAttachPoint=languageContainerNode]', attributeValueNode);
            if(nodeArray.length) {
              this._languageContainerNodes[this._rowCount] = nodeArray[0];
              var languageInputs = "";
              for(var langkey in epages.vars.languages) {
                if(langkey != currentLanguageId) {

                  // template switch - use template version for translations
                  var tempAttrValueTemplate = "";
                  if(islocked) {
                    tempAttrValueTemplate = attrValueTemplate;
                  } else {
                    tempAttrValueTemplate = (this._attributeTemplateMapping[attributeData.type].editTransl) ? this._attributeTemplateMapping[attributeData.type].editTransl : attrValueTemplate;
                  }
                  predefValueKey = "value"+':'+langkey; 																	// use current langkey in predefValueKey
                  var attributeValue= "";
                  if(attributeData.value) {
                    attributeValue = attributeData.value;
                  } else if(attributeData['value:'+langkey]) {
                    attributeValue = attributeData['value:'+langkey];
                  }

                  var uploader = "";
                  var uploadTmpl = $TMPL(this._fileUploadTemplate, {
                    attribute_alias : this.alias,
                    attribute_id    : attributeData.id,
                    langid          : langkey,
                    file            : attributeData.file,
                    value           : attributeData.value,
                    product_id      : attributeData.productId
                  }, false);
                  uploader = uploadTmpl.generateOutput();

                  var attributeFile = "";
                  if(attributeData['file:'+langkey]) {
                    var fileTmpl = $TMPL(this._fileValueTemplate, {
                      attribute_alias : this.alias,
                      attribute_id    : attributeData.id,
                      langid          : langkey,
                      file            : attributeData['file:'+langkey],
                      value           : attributeData['value:'+langkey],
                      product_id      : attributeData.productId
                    }, false);
                    attributeFile = fileTmpl.generateOutput();
                  }

                  var langData = epages.vars.languages[langkey];
                  var inputHtml = this._createInput({
                    templatestring: tempAttrValueTemplate,
                    alias           : this.alias,
                    langid          : langkey,
                    'native'        : '<span class="Smaller">(' + langData['native'] + ')</span>',
                    predef_name     : (predefined) ? predefined.alias : undefined,
                    predef_id       : (predefined) ? predefined.id : undefined,
                    predef_value    : (predefined) ? predefined[predefValueKey] : undefined,
                    attribute_value : attributeValue,
                    attribute_file  : attributeFile,
                    predef_checked  : predefIsChecked,
                    attribute_id    : attributeData.id,
                    attribute_uploader : uploader
                  });
                  languageInputs += '<div class="LanguageInput">'+inputHtml+'</div>';
                }
              }
              this._languageContainerNodes[this._rowCount].innerHTML=languageInputs;
            }

            // append events (more languages link)
            var mLanguagesNodeArray= dojo.query('[epAttachPoint=moreLaguagesNode]',attributeValueNode);
            if(mLanguagesNodeArray.length) {
              this._moreLaguagesNodes[this._rowCount] = mLanguagesNodeArray[0];
              this._moreLaguagesNodes[this._rowCount].setAttribute("ep_rowcount", this._rowCount);
              this._ep_connects[this._rowCount]['languagesNode'] = dojo.connect(this._moreLaguagesNodes[this._rowCount], "onclick", this, "_onShowLanguages");
            }
          }
          var innerWidgets = dojo.parser.parse(this.valueContainerNode);	//create inner widgets
          this._ep_childWidgets[this._rowCount] = [];
          var _this = this;
          dojo.forEach(innerWidgets, function(el) {
            _this._ep_childWidgets[_this._rowCount].push(el);
          });

          this._rowCount++;
        }

        var self = this;

        require([
            "jquery",

            "ep/ui/datepicker",
            "$ready!"
        ], function ($) {
            var domNode = $(self.domNode);
            var dateInputs = domNode.find('.ep-date-input');
            var dateTimeInputs = domNode.find('.ep-date-time-input');
            var timeInputs = domNode.find('.ep-time-input');

            if (dateInputs.length){
                dateInputs.uiDatepicker({'type':'date','format':'d','time':false});
            }
           
            if (dateTimeInputs.length){
                dateTimeInputs.uiDatepicker({'type':'date','format':'l','time':true});
            }
            
            if (timeInputs.length) {
                timeInputs.uiSpinner({type: 'date', format: 't'});
            }    
        });

      }
    },

    _createInput : function(/* object */opt) {
      // summary: creates a single input element
      // opt: {
      //         templatestring    - input template string
      //         alias             - alias of attribute
      //         langid            - languageid of input field
      //         native            - native name of language
      //         predef_name       - name for predefined choice input field
      //         predef_id         - ObjectID of predefined choice
      //         predef_value      - value of predefined choice (e.g. name of choice)
      //         predef_checked    - predefined choice is selected
      //         attribute_value   - value of attribute
      //         attribute_name    - inputfield name for attribute (<attribute alias>:<langid>)
      //         attribute_checked1- inputfield checked string for yes radio buttons (Boolean)
      //         attribute_checked0- inputfield checked string for no radio buttons (Boolean)
      //         attribute_file    - link html for uploaded files (File, LocalizedFile)
      //      }
      var inputTmpl = $TMPL(opt.templatestring , {
          langid            : opt.langid,
          attribute_name    : opt.alias+':'+opt.langid,
          'native'          : (opt['native']) ? opt['native'] : "",
          predef_name       : (opt.predef_name) ? opt.predef_name : "",
          predef_id         : (opt.predef_id) ? opt.predef_id : "",
          predef_value      : (opt.predef_value) ? opt.predef_value : "",
          predef_checked    : (opt.predef_checked) ? opt.predef_checked : "",
          attribute_value   : (opt.attribute_value) ? opt.attribute_value : "",
          attribute_checked1: (opt.attribute_checked1) ? opt.attribute_checked1 : "",
          attribute_checked0: (opt.attribute_checked0) ? opt.attribute_checked0 : "",
          attribute_file    : (opt.attribute_file) ? opt.attribute_file : "",
          attribute_uploader: (opt.attribute_uploader) ? opt.attribute_uploader : "",
          attribute_id      : (opt.attribute_id) ? opt.attribute_id : ""
      }, false);
      return inputTmpl.generateOutput();
    },

    /**
     * events
     */

    _onAttributTypeChange: function(evt) {
      var selectNode = evt.currentTarget;
      var defaultTypePackage = epages.vars.defaultTypePackage;
      if(defaultTypePackage[selectNode.value]) {
        // destory old content
        this._destroyAttributeValues();

        this.data = defaultTypePackage[selectNode.value];
        // create new value nodes / rows
        this._createAttributeValueNodes(this.data, true);
        if(this.data.isPreDefAttributesContainer) {								// append new editable entry for new attribute values
          this._createNewRow();
          this.addNewPredefValueNode.style.display="";
        } else {
          this.addNewPredefValueNode.style.display="none";
        }
      }
    },

    _onShowLanguages: function(evt) {
      // summary: change display of languages nodes
      var myIndex = evt.currentTarget.getAttribute("ep_rowcount");
      evt.currentTarget.style.display="none";
      dojo.fx.wipeIn({ node: this._languageContainerNodes[myIndex],  duration: 200}).play();
    },

    _onDeleteRow: function(evt) {
      // summary: delete specific row
      var myRowIndex = evt.currentTarget.getAttribute("ep_rowcount");
      var rowNode = this._rowNodes[myRowIndex];

      // detach events
      for(var el in this._ep_connects[myRowIndex]) {
        dojo.disconnect(this._ep_connects[myRowIndex][el]);
      }
      delete this._ep_connects[myRowIndex];

      // destroy inner widgets
      var rowWidgets = this._ep_childWidgets[myRowIndex];
      for(var el in rowWidgets) {
        var widget = rowWidgets[el];
        if(widget) {
          widget.destroy();
        }
        delete this._ep_childWidgets[myRowIndex];
      }

      // remove row dom node
      rowNode.parentNode.removeChild(rowNode);
    },

    _onDelete: function(evt) {
      // summary: delete / destroy widget
      this.destroy();
    },

    /**
     * other functions
     */

    _createNewRow: function() {
    // summary: create a new row with empty input fields for new predef attribute choices
      var attrData = this.data;
      var currentLanguageId = epages.vars.Locale.languageId;
      var attrOptions = {
        type                        : attrData.type,
        isLocalized                 : attrData.isLocalized,
        isPreDefAttributesContainer : true,
        preDefAttributes            : []
      };

      var emptyPredefAttr = {
        alias: '-alias:new-',
        id: '-id:new-'
      };

      for(var langkey in epages.vars.languages) {
        attrOptions['name:'+langkey] = "";
        if(currentLanguageId != langkey && attrData.isLocalized) {
          emptyPredefAttr['value:'+langkey] = "";
        }
      }
      attrOptions.preDefAttributes.push(emptyPredefAttr);
      this._createAttributeValueNodes(attrOptions, false);

    },

    _destroyAttributeValues : function() {
    // summary: detach all connects / destroy all value nodes
      for(var el in this._ep_connects) {
        var rowconnects = this._ep_connects[el];
        for(var connection in rowconnects) {
          dojo.disconnect(rowconnects[connection]);
        }
        delete this._ep_connects[el];
      }

      // destroy inner widgets
      for(var key in this._ep_childWidgets) {
        var cWidgets = this._ep_childWidgets[key];
        for(var el in cWidgets) {
          var widget = cWidgets[el];
          if(widget) {
            widget.destroy();
          }
          delete this._ep_childWidgets[key];
        }
      }

      // destroy dom nodes
      this.valueContainerNode.innerHTML="";
    }

});