Vue.directive('fillcolor', function(el, binding) {  
    el.style.fill =  binding.value;
   el.style.transition = "opacity 1s";
})

new Vue({
  
  el: '#app',
  
  data() {
    return {
      items: {},
      
      activepalette: "red",
      activeColor: "#ef5350", // for red palette
      activeIndex: 0,    
      
      clickedPalette: "red",                
      clickedColor: "#E53935",
      
      nextColor: "#D81B60", 
      prevColor: "#ef5350", 
    };
  },

  created() {
    this.fetchData();     
  }, 
  
  
  watch: {
    
    items(newValue) { 
      this.$nextTick(function() {
         this.createColorWheel();
         this.createSpectrum()
       })  

    },
    
    activeIndex(newValue) {    
      this.assignColors(newValue); 
      this.rotateWheel(newValue);            
    }, 
    
    activepalette(newValue) {
      this.createSpectrum()
    }, 
    
  }, // end of watch
  
  computed: {
    
    activeValues() {
      return _.find(this.items, (item, index) => {
        return index == this.activepalette        
      })
    }, 
    
    paletteSize() {
      return _.size(this.items)  
    }, 
    
  }, // end of computed

  methods: {
    
    fetchData() {
      var self = this;
      var dataURL="https://raw.githubusercontent.com/Krutie/dataRepo/master/palette.json";
      
      $.getJSON(dataURL, function(data) {        
        self.items = data;  
      });
      
    }, // end of fetchData()
    
    createColorWheel() {

      let degrees = $(".palettes")     
      
          let angle = 360/16;
      
          degrees.each(function(index, item) {
            TweenMax.to(item, 2, {
             rotation: angle*index, opacity: 1, transformOrigin: "0% 100%"
            }, 1); 
          });
      
    }, // end of createColorWheel
    
     createSpectrum() {       
        let palette = $(".palette")   
        let paletteTitle = $(".paletteTitle");
        let angle = 360/_.size(palette);
     
        _.map(palette, (item, key) => {            
              TweenMax.to(item, 1, { 
                rotation: angle*key+50, opacity: 1, transformOrigin: "100% 65%", delay: 0.2,
                onComplete: this.createTitleOnAPath
              }, 0.1);        
         }); // end of map              
    }, // end of createSpectrum()
    
    createTitleOnAPath(){
       TweenMax.staggerFromTo($(".paletteTitle"), 0.5,      
           { rotation: 0, opacity: 0 },
           { rotation: -45, opacity: 1, transformOrigin: "60% 55%"
         }, 0.1); // end of TweenMax      
    },
    
    // For Interactive Color Wheel 
    assignColors(newValue){
      
      let k = _.keys(this.items);    
      this.clickedPalette = k[newValue];    
      
      let c = k[newValue];      
      this.clickedColor = this.items[c].shade_600;
              
      let n = k[newValue+1]       
      let p = k[newValue-1]                 
           
      this.fillColor(".title", this.clickedColor);
      
      if (n != undefined  ) {
        this.fillColor(".nextBtn", this.items[n].shade_600 );
        this.strokeColor(".nextBtnRect", this.items[n].shade_600 );
      }                  
      
      if (p != undefined  ) {
         this.fillColor(".prevBtn", this.items[p].shade_600);
         this.strokeColor(".prevBtnRect", this.items[p].shade_600);
      }                    
      
    }, // end of assignColors 
    fillColor(el, shade) {
       TweenMax.staggerTo(el, 1, {
					  fill:shade
				}, 1, 0) 
    },
    strokeColor(el, shade) {
       TweenMax.staggerTo(el, 1, {
					  stroke:shade
				}, 1, 0) 
    },
    rotateWheel(clickedKey) {       
        let degrees = $(".palettes");  let angle = 360/16;      
       _.map(degrees, (index, key) => {
            if(clickedKey == key) {
                 TweenLite.to(index, 1, {
                    rotation: 0+'_short', transformOrigin: "0% 100%",delay: 1.5, onStart: this.erasePrevious,
                }, 0.1);   
            } else if (key == 0) {              
                TweenLite.to(index, 1, {
                    rotation: (clickedKey*angle)+'_short', transformOrigin: "0% 100%", delay: 1
                }, 0.1); 
            } else {
              TweenLite.to(index, 1, {
                rotation: key*angle+'_short', transformOrigin: "0% 100%", delay: 0.5     
                }, 0.1);
            }
        });         
    }, // end of rotateWheel
    
    erasePrevious() { 
       let palette = $(".palette")         
       let angle = 360/_.size(palette);
       let eraseTL = new TimelineMax();
       _.map(palette, (index, key) => {            
            eraseTL.to(index, 1.5, {
                rotation: 0, opacity: 0, transformOrigin: "100% 65%", ease: Circ.easeOut
           }, 0.1); 
       });     
      
       eraseTL.to($(".paletteTitle"), 1.5, {
          rotation: 0, opacity: 0, transformOrigin: "60% 55%", ease: Circ.easeOut, onComplete: this.passNewValues
       }, 0.1);            
      
    }, // end of erasePrevious
    passNewValues() {
      this.activepalette = this.clickedPalette; 
      this.activeColor = this.clickedColor;
    },
    
    prevPalette() { this.activeIndex -= 1; },
    nextPalette() { this.activeIndex += 1;  },
    
    
  }, // end of methods
 
})