'use strict';

window.onload = function () {
  var svgMorpheus = new SVGMorpheus('#icon'),
      selIcon     = document.getElementById('selIcon'),
      selEasing   = 'Elastic In/Out',
      selDuration = 1800,
      selRotation = 'Clockwise',

      icons={
        'yellow_uke':'Yellow Uke',
        'blue_uke':'Blue Uke',
        'green_uke':'Green Uke',
        'orange_uke':'Orange Uke',
        'pink_uke':'Pink Uke',
       },
      easings={
        'circ-in': 'Circ In','circ-out': 'Circ Out','circ-in-out': 'Circ In/Out',
        'cubic-in': 'Cubic In', 'cubic-out': 'Cubic Out', 'cubic-in-out': 'Cubic In/Out',
        'elastic-in': 'Elastic In', 'elastic-out': 'Elastic Out', 'elastic-in-out': 'Elastic In/Out',
        'expo-in': 'Expo In', 'expo-out': 'Expo Out', 'expo-in-out': 'Expo In/Out',
        'linear': 'Linear',
        'quad-in': 'Quad In', 'quad-out': 'Quad Out', 'quad-in-out': 'Quad In/Out',
        'quart-in': 'Quart In', 'quart-out': 'Quart Out', 'quart-in-out': 'Quart In/Out',
        'quint-in': 'Quint In', 'quint-out': 'Quint Out', 'quint-in-out': 'Quint In/Out',
        'sine-in': 'Sine In','sine-out': 'Sine Out','sine-in-out': 'Sine In/Out'
      },
      durations=[250, 500, 750, 2000, 5000],
      rotations={
        'clock': 'Clockwise',
        'counterclock': 'Counterclockwise',
        'random': 'Random',
        'none': 'None'
      };

  var key, i, len;

  for(key in icons) {
    selIcon.options[selIcon.options.length]=new Option(icons[key], key);
  }

    /*
  for(key in easings) {
    selEasing.options[selEasing.options.length]=new Option(easings[key], key);
  }

  for(i=0, len=durations.length;i<len;i++) {
    selDuration.options[selDuration.options.length]=new Option(durations[i], durations[i]);
  }

  for(key in rotations) {
    selRotation.options[selRotation.options.length]=new Option(rotations[key], key);
  }
  */


  selIcon.selectedIndex=selIcon.options.length-1;
//  selEasing.selectedIndex=15;
//  selDuration.selectedIndex=2;
//  selRotation.selectedIndex=0;

  function getSelValue(sel) {
    return sel.options[sel.selectedIndex].value;
  }

  var timeoutInstance, manualChange=false;
  function onIconChange() {
    clearTimeout(timeoutInstance);
//   var valIcon=getSelValue(selIcon),
   var valIcon=getSelValue(selIcon),

       valEasing='elastic-in-out',
        valDuration='2000',
        valRotation='clock';

/*       valEasing=getSelValue(selEasing),
        valDuration=getSelValue(selDuration),
        valRotation=getSelValue(selRotation);
*/
        
 //       valEasing=getSelValue(selEasing),
//        valDuration=getSelValue(selDuration),
//        valRotation=getSelValue(selRotation);
    svgMorpheus.to(valIcon, {duration: valDuration, easing: valEasing, rotation: valRotation},!manualChange?launchTimer:null);
  }
  function timerTick() {
    var selIndex=selIcon.selectedIndex;
    while(selIndex===selIcon.selectedIndex) {
      selIndex=Math.round(Math.random()*(selIcon.options.length-1));
    }
    selIcon.selectedIndex=selIndex;
    onIconChange();
  }
  function launchTimer() {
    timeoutInstance=setTimeout(timerTick, 1000);
  }
  selIcon.addEventListener('change', onIconChange);
  selIcon.addEventListener('click',function(){
    clearTimeout(timeoutInstance);
    manualChange=false;
  });

  launchTimer();
};