<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/layout/layout.html">


<dom-module id="sample-element">
  <template>
    <h1>#1</h1>
    <div>{{_computeJonsFavorite(GestaltGroupingLaws)}}</div>
    <h1>#2 (doesn't work)</h1>
    <div>{{nextMostFavorite}}</div>
    <h1>#2 (for real)</h1>
    <div>{{nextMostFavoriteThatWorks}}</div>
  </template>
</dom-module>

<script>
  Polymer({
    is:'sample-element',
    behaviors:[],
    properties:{
        gestaltGroupings:{
          type:Array,
          value: function(){
            return [
             "Proximity",
             "Similarity",
             "Closure",
             "Symmetry",
             "Common_Fate",
             "Continuity",
             "Good_Gestalt",
             "Past_Experience"
           ];
          }
        },
        GestaltGroupingLaws:{
          type:Object,
          computed:'toKeys(gestaltGroupings)'
        },
        nextMostFavorite:{
          type:String,
          computed:'_setNextMostFavorite(GestaltGroupingLaws)'
        },
        nextMostFavoriteThatWorks:{
          type:String,
          computed:'_nextMostFavorite(GestaltGroupingLaws)'
        }
    },

    _computeJonsFavorite:function(gestaltKeys){
      if(gestaltKeys)
          return gestaltKeys.Symmetry;
      return "";  
    }, 
     _setNextMostFavorite:function(gestaltKeys){
      if(gestaltKeys)
          return gestaltKeys.Proximity;
      return "";  
    }, 
    _nextMostFavorite:function(gestaltKeys){
         if(gestaltKeys)
          return gestaltKeys.Proximity;
      return "";
    },
    toKeys: function(gestaltGroupings){
         if(gestaltGroupings){  
          var obj = {};
          for(var i=0; i < gestaltGroupings.length; i++)
            obj[gestaltGroupings[i]] = gestaltGroupings[i];
          return obj;   
         }
         return {};
    }
});
</script>