var transNames = ["No Transition", "Swipe Left", "Swipe Right", "Swipe Up", "Swipe Down", "Swipe Right Down", "Swipe Right Up", "Swipe Left Down", "Swipe Left Up", "Vertical Comb", "Horizontal Comb", "Vertical Blinds", "Horizontal Blinds", "Vertical Split In", "Horizontal Split In", "Vertical Split Out", "Horizontal Split Out", "Box", "Box In", "Box Out", "Corner In", "Corner Out", "Windmill", "Fade"];

function playTrans(index) {
  switch (index) {
    case 0: break; /* No transition */
    case 1: slideTransitions.left(); break;
    case 2: slideTransitions.right(); break;
    case 3: slideTransitions.up(); break;
    case 4: slideTransitions.down(); break;
    case 5: slideTransitions.rightDown(); break;
    case 6: slideTransitions.rightUp(); break;
    case 7: slideTransitions.leftDown(); break;
    case 8: slideTransitions.leftUp(); break;
    case 9: slideTransitions.vComb(); break;
    case 10: slideTransitions.hComb(); break;
    case 11: slideTransitions.vBlinds(); break;
    case 12: slideTransitions.hBlinds(); break;
    case 13: slideTransitions.vSplitIn(); break;
    case 14: slideTransitions.hSplitIn(); break;
    case 15: slideTransitions.vSplitOut(); break;
    case 16: slideTransitions.hSplitOut(); break;
    case 17: slideTransitions.box(); break;
    case 18: slideTransitions.boxIn(); break;
    case 19: slideTransitions.boxOut(); break;
    case 20: slideTransitions.cornerIn(); break;
    case 21: slideTransitions.cornerOut(); break;
    case 22: slideTransitions.windmill(); break;
    case 23: slideTransitions.fade(); break;
  }
}

function buildTransitionList() {
  var s = '';
  for (var i=0; i<transNames.length; i++) {
    s += '<label><input type=\'radio\' name=\'transition-list-label\'> ' + transNames[i] + '<\/label>';
  }
  g('transition-list').innerHTML = s;
}
  
var slideTransitions = {

  /* Sets up panels */
  buildPanels: function(numPanels) {
    var s = '';
    
    for (var i=0; i<numPanels; i++) {
      s += '<div class=\'transition-panel\' style=\'background-color:' + slideTransitions.color + ';\'><\/div>';
    }
    g('transition-container').innerHTML = s;
  },
  
  preAnim: function() {
    g('transition-container').style.display = 'block';
    
    if (this.value == null) {
      this.value = 0;
      this.dir = true;
      g('transition-preview-button').disabled = true;
    }
    
    if (this.dir) {
      this.value += slideTransitions.smooth;
    }
    else {
      this.value -= slideTransitions.smooth;
    }
  },
  
  postAnim: function() {
    if (this.value >= 100) {
      this.dir = false;
    }
    if (this.value <= 0) {
      this.value = null;
      this.dir = null;
      g('transition-container').style.display = 'none';
      g('transition-preview-button').disabled = false;
      return true;
    }
  },
  
  /* Swipe Left */
  left: function() {
    slideTransitions.buildPanels(1);
    slideTransitions.preAnim();
    
    var tmp = g('transition-container').getElementsByTagName('div')[0];
    tmp.style.width = slideTransitions.value + '%';
    tmp.style.height = '100%';
    slideTransitions.dir ? tmp.style.right = 0 : tmp.style.left = 0;
    
    if (slideTransitions.postAnim()) {return;}
    setTimeout(slideTransitions.left, 50);
  },
  
  /* Swipe Right */
  right: function() {
    slideTransitions.buildPanels(1);
    slideTransitions.preAnim();
    
    var tmp = g('transition-container').getElementsByTagName('div')[0];
    tmp.style.width = slideTransitions.value + '%';
    tmp.style.height = '100%';
    slideTransitions.dir ? tmp.style.left = 0 : tmp.style.right = 0;
    
    if (slideTransitions.postAnim()) {return;}
    setTimeout(slideTransitions.right, 50);
  },
  
  /* Swipe Up */
  up: function() {
    slideTransitions.buildPanels(1);
    slideTransitions.preAnim();
    
    var tmp = g('transition-container').getElementsByTagName('div')[0];
    tmp.style.width = '100%';
    tmp.style.height = slideTransitions.value + '%';
    slideTransitions.dir ? tmp.style.bottom = 0 : tmp.style.top = 0;
    
    if (slideTransitions.postAnim()) {return;}
    setTimeout(slideTransitions.up, 50);
  },
  
  /* Swipe Down */
  down: function() {
    slideTransitions.buildPanels(1);
    slideTransitions.preAnim();
    
    var tmp = g('transition-container').getElementsByTagName('div')[0];
    tmp.style.width = '100%';
    tmp.style.height = slideTransitions.value + '%';
    slideTransitions.dir ? tmp.style.top = 0 : tmp.style.bottom = 0;
    
    if (slideTransitions.postAnim()) {return;}
    setTimeout(slideTransitions.down, 50);
  },
  
  /* Swipe Right Down */
  rightDown: function() {
    slideTransitions.buildPanels(2);
    slideTransitions.preAnim();
    
    var tmp = getElementsByClassName('transition-panel');
    
    if (slideTransitions.dir) {
      tmp[0].style.top = tmp[1].style.top = 0;
      tmp[0].style.left = tmp[1].style.left = 0;
    }
    else {
      tmp[0].style.bottom = tmp[1].style.bottom = 0;
      tmp[0].style.right = tmp[1].style.right = 0;
    }
    
    tmp[0].style.width = tmp[1].style.height = slideTransitions.value + '%';
    tmp[0].style.height = tmp[1].style.width = '100%';
    
    if (slideTransitions.postAnim()) {return;}
    setTimeout(slideTransitions.rightDown, 50);
  },
  
  /* Swipe Right Up */
  rightUp: function() {
    slideTransitions.buildPanels(2);
    slideTransitions.preAnim();
    
    var tmp = getElementsByClassName('transition-panel');
    
    if (slideTransitions.dir) {
      tmp[0].style.bottom = tmp[1].style.bottom = 0;
      tmp[0].style.left = tmp[1].style.left = 0;
    }
    else {
      tmp[0].style.top = tmp[1].style.top = 0;
      tmp[0].style.right = tmp[1].style.right = 0;
    }
    
    tmp[0].style.width = tmp[1].style.height = slideTransitions.value + '%';
    tmp[0].style.height = tmp[1].style.width = '100%';
    
    if (slideTransitions.postAnim()) {return;}
    setTimeout(slideTransitions.rightUp, 50);
  },
  
  /* Swipe Left Up */
  leftUp: function() {
    slideTransitions.buildPanels(2);
    slideTransitions.preAnim();
    
    var tmp = getElementsByClassName('transition-panel');
    
    if (slideTransitions.dir) {
      tmp[0].style.bottom = tmp[1].style.bottom = 0;
      tmp[0].style.right = tmp[1].style.right = 0;
    }
    else {
      tmp[0].style.top = tmp[1].style.top = 0;
      tmp[0].style.left = tmp[1].style.left = 0;
    }
    
    tmp[0].style.width = tmp[1].style.height = '100%';
    tmp[0].style.height = tmp[1].style.width = slideTransitions.value + '%';
    
    if (slideTransitions.postAnim()) {return;}
    setTimeout(slideTransitions.leftUp, 50);
  },
  
  /* Cover Left Down */
  leftDown: function() {
    slideTransitions.buildPanels(2);
    slideTransitions.preAnim();
    
    var tmp = getElementsByClassName('transition-panel');
    
    if (slideTransitions.dir) {
      tmp[0].style.top = tmp[1].style.top = 0;
      tmp[0].style.right = tmp[1].style.right = 0;
    }
    else {
      tmp[0].style.bottom = tmp[1].style.bottom = 0;
      tmp[0].style.left = tmp[1].style.left = 0;
    }
    
    tmp[0].style.width = tmp[1].style.height = slideTransitions.value + '%';
    tmp[0].style.height = tmp[1].style.width = '100%';
    
    if (slideTransitions.postAnim()) {return;}
    setTimeout(slideTransitions.leftDown, 50);
  },
  
  /* Vertical Comb */
  vComb: function() {
    slideTransitions.buildPanels(slideTransitions.size);
    slideTransitions.preAnim();
    
    var tmp = getElementsByClassName('transition-panel');
    for (var i=0; i<tmp.length; i++) {
      tmp[i].style.width = Math.round(1 / tmp.length * 100) + '%';
      tmp[i].style.height = slideTransitions.value + '%';
      tmp[i].style.left = (Math.round(1 / tmp.length * 100) * i) + '%';
      if (slideTransitions.dir) {
        tmp[i].style.top = (i%2 == 0) ? 0 : '';
        tmp[i].style.bottom = (i%2 != 0) ? 0 : '';
      }
      else {
        tmp[i].style.top = (i%2 != 0) ? 0 : '';
        tmp[i].style.bottom = (i%2 == 0) ? 0 : '';
      }
    }
    
    if (slideTransitions.postAnim()) {return;}
    setTimeout(slideTransitions.vComb, 50);
  },
  
  /* Horizontal Comb */
  hComb: function() {
    slideTransitions.buildPanels(slideTransitions.size);
    slideTransitions.preAnim();
    
    var tmp = getElementsByClassName('transition-panel');
    for (var i=0; i<tmp.length; i++) {
      tmp[i].style.width = slideTransitions.value + '%';
      tmp[i].style.height = Math.round(1 / tmp.length * 100) + '%';
      tmp[i].style.top = (Math.round(1 / tmp.length * 100) * i) + '%';
      if (slideTransitions.dir) {
        tmp[i].style.left = (i%2 == 0) ? 0 : '';
        tmp[i].style.right = (i%2 != 0) ? 0 : '';
      }
      else {
        tmp[i].style.left = (i%2 != 0) ? 0 : '';
        tmp[i].style.right = (i%2 == 0) ? 0 : '';
      }
    }
    
    if (slideTransitions.postAnim()) {return;}
    setTimeout(slideTransitions.hComb, 50);
  },
  
  /* Vertical Blinds */
  vBlinds: function() {
    slideTransitions.buildPanels(slideTransitions.size);
    slideTransitions.preAnim();
    
    var tmp = getElementsByClassName('transition-panel');
    for (var i=0; i<tmp.length; i++) {
      tmp[i].style.width = Math.round(1 / tmp.length * slideTransitions.value) + '%';
      tmp[i].style.height = '100%';
      tmp[i].style.left = slideTransitions.dir ? (Math.round(1 / tmp.length * 100) * i) + '%' : '';
      tmp[i].style.right = slideTransitions.dir ? '' : (Math.round(1 / tmp.length * 100) * i) + '%';
    }
    
    if (slideTransitions.postAnim()) {return;}
    setTimeout(slideTransitions.vBlinds, 50);
  },
  
  /* Horizontal Blinds */
  hBlinds: function() {
    slideTransitions.buildPanels(slideTransitions.size);
    slideTransitions.preAnim();
    
    var tmp = getElementsByClassName('transition-panel');
    for (var i=0; i<tmp.length; i++) {
      tmp[i].style.width = '100%';
      tmp[i].style.height = Math.round(1 / tmp.length * slideTransitions.value) + '%';
      tmp[i].style.top = slideTransitions.dir ? (Math.round(1 / tmp.length * 100) * i) + '%' : '';
      tmp[i].style.bottom = slideTransitions.dir ? '' : (Math.round(1 / tmp.length * 100) * i) + '%';
    }
    
    if (slideTransitions.postAnim()) {return;}
    setTimeout(slideTransitions.hBlinds, 50);
  },
  
  /* Vertical Split In */
  vSplitIn: function() {
    slideTransitions.buildPanels(2);
    slideTransitions.preAnim();
    
    var tmp = getElementsByClassName('transition-panel');
    tmp[0].style.width = tmp[1].style.width = Math.round(slideTransitions.value / 2) + '%';
    tmp[0].style.height = tmp[1].style.height = '100%';
    tmp[0].style.left = tmp[1].style.right = slideTransitions.dir ? 0 : '50%';
    
    if (slideTransitions.postAnim()) {return;}
    setTimeout(slideTransitions.vSplitIn, 50);
  },
  
  /* Horizontal Split In */
  hSplitIn: function() {
    slideTransitions.buildPanels(2);
    slideTransitions.preAnim();
    
    var tmp = getElementsByClassName('transition-panel');
    tmp[0].style.width = tmp[1].style.width = '100%';
    tmp[0].style.height = tmp[1].style.height = Math.round(slideTransitions.value / 2) + '%';
    tmp[0].style.top = tmp[1].style.bottom = slideTransitions.dir ? 0 : '50%';
    
    if (slideTransitions.postAnim()) {return;}
    setTimeout(slideTransitions.hSplitIn, 50);
  },
  
  /* Horizontal Split Out */
  hSplitOut: function() {
    slideTransitions.buildPanels(2);
    slideTransitions.preAnim();
    
    var tmp = getElementsByClassName('transition-panel');
    tmp[0].style.width = tmp[1].style.width = '100%';
    tmp[0].style.height = tmp[1].style.height = Math.round(slideTransitions.value / 2) + '%';
    tmp[0].style.bottom = tmp[1].style.top = slideTransitions.dir ? '50%' : 0;
    
    if (slideTransitions.postAnim()) {return;}
    setTimeout(slideTransitions.hSplitOut, 50);
  },
  
  /* Vertical Split Out */
  vSplitOut: function() {
    slideTransitions.buildPanels(2);
    slideTransitions.preAnim();
    
    var tmp = getElementsByClassName('transition-panel');
    tmp[0].style.width = tmp[1].style.width = Math.round(slideTransitions.value / 2) + '%';
    tmp[0].style.height = tmp[1].style.height = '100%';
    tmp[0].style.left = tmp[1].style.right = slideTransitions.dir ? '50%' : 0;
    
    if (slideTransitions.postAnim()) {return;}
    setTimeout(slideTransitions.vSplitOut, 50);
  },
  
  /* Box */
  box: function() {
    slideTransitions.buildPanels(4);
    slideTransitions.preAnim();
    
    var tmp = getElementsByClassName('transition-panel');
    tmp[0].style.width = tmp[1].style.width = '100%';
    tmp[0].style.height = tmp[1].style.height = Math.round(slideTransitions.value / 2) + '%';
    
    tmp[2].style.width = tmp[3].style.width = Math.round(slideTransitions.value / 2) + '%';
    tmp[2].style.height = tmp[3].style.height = '100%';

    tmp[0].style.top = 0;
    tmp[1].style.bottom = 0;
    tmp[2].style.left = 0;
    tmp[3].style.right = 0;

    if (slideTransitions.postAnim()) {return;}
    setTimeout(slideTransitions.box, 50);
  },
  
  /* Box In */
  boxIn: function() {
    slideTransitions.buildPanels(4);
    slideTransitions.preAnim();
    
    var tmp = getElementsByClassName('transition-panel');
    tmp[0].style.width = tmp[1].style.width = slideTransitions.dir ? '100%' : Math.round(slideTransitions.value / 2) + '%';
    tmp[0].style.height = tmp[1].style.height = Math.round(slideTransitions.value / 2) + '%';
    
    tmp[2].style.width = tmp[3].style.width = Math.round(slideTransitions.value / 2) + '%';
    tmp[2].style.height = tmp[3].style.height = slideTransitions.dir ? '100%' : Math.round(slideTransitions.value / 2) + '%';
    
    
    if (slideTransitions.dir) {
      tmp[0].style.top = 0;
      tmp[1].style.bottom = 0;
      tmp[2].style.left = 0;
      tmp[3].style.right = 0;
    }
    else {
      tmp[0].style.top = tmp[0].style.right = '50%';
      tmp[1].style.bottom = tmp[1].style.left = '50%';
      tmp[2].style.top = tmp[2].style.left = '50%';
      tmp[3].style.bottom = tmp[3].style.right = '50%';
    }
    
    if (slideTransitions.postAnim()) {return;}
    setTimeout(slideTransitions.boxIn, 50);
  },
  
  /* Box Out */
  boxOut: function() {
    slideTransitions.buildPanels(4);
    slideTransitions.preAnim();
    
    var tmp = getElementsByClassName('transition-panel');
    tmp[0].style.width = tmp[1].style.width = slideTransitions.dir ? Math.round(slideTransitions.value / 2) + '%' : '100%';
    tmp[0].style.height = tmp[1].style.height = Math.round(slideTransitions.value / 2) + '%';
    
    tmp[2].style.width = tmp[3].style.width = Math.round(slideTransitions.value / 2) + '%';
    tmp[2].style.height = tmp[3].style.height = slideTransitions.dir ? Math.round(slideTransitions.value / 2) + '%' : '100%';
    
    
    if (slideTransitions.dir) {
      tmp[0].style.top = tmp[0].style.right = '50%';
      tmp[1].style.bottom = tmp[1].style.left = '50%';
      tmp[2].style.top = tmp[2].style.left = '50%';
      tmp[3].style.bottom = tmp[3].style.right = '50%';
    }
    else {
      tmp[0].style.top = 0;
      tmp[1].style.bottom = 0;
      tmp[2].style.left = 0;
      tmp[3].style.right = 0;
    }
    
    if (slideTransitions.postAnim()) {return;}
    setTimeout(slideTransitions.boxOut, 50);
  },
  
  /* Corner In */
  cornerIn: function() {
    slideTransitions.buildPanels(4);
    slideTransitions.preAnim();
    
    var tmp = getElementsByClassName('transition-panel');
    tmp[0].style.width = tmp[1].style.width = slideTransitions.dir ? Math.round(slideTransitions.value / 2) + '%' : '100%';
    tmp[0].style.height = tmp[1].style.height = Math.round(slideTransitions.value / 2) + '%';
    
    tmp[2].style.width = tmp[3].style.width = Math.round(slideTransitions.value / 2) + '%';
    tmp[2].style.height = tmp[3].style.height = slideTransitions.dir ? Math.round(slideTransitions.value / 2) + '%' : '100%';
    
    
    if (slideTransitions.dir) {
      tmp[0].style.top = tmp[0].style.right = 0;
      tmp[1].style.bottom = tmp[1].style.left = 0;
      tmp[2].style.top = tmp[2].style.left = 0;
      tmp[3].style.bottom = tmp[3].style.right = 0;
    }
    else {
      tmp[0].style.top = '50%';
      tmp[1].style.bottom = '50%';
      tmp[2].style.left = '50%';
      tmp[3].style.right = '50%';
    }
    
    if (slideTransitions.postAnim()) {return;}
    setTimeout(slideTransitions.cornerIn, 50);
  },
  
  /* Corner Out */
  cornerOut: function() {
    slideTransitions.buildPanels(4);
    slideTransitions.preAnim();
    
    var tmp = getElementsByClassName('transition-panel');
    tmp[0].style.width = tmp[1].style.width = slideTransitions.dir ? '100%' : Math.round(slideTransitions.value / 2) + '%';
    tmp[0].style.height = tmp[1].style.height = Math.round(slideTransitions.value / 2) + '%';
    
    tmp[2].style.width = tmp[3].style.width = Math.round(slideTransitions.value / 2) + '%';
    tmp[2].style.height = tmp[3].style.height = slideTransitions.dir ? '100%' : Math.round(slideTransitions.value / 2) + '%';
    
    
    if (slideTransitions.dir) {
      tmp[0].style.top = '50%';
      tmp[1].style.bottom = '50%';
      tmp[2].style.left = '50%';
      tmp[3].style.right = '50%';
    }
    else {
      tmp[0].style.top = tmp[0].style.right = 0;
      tmp[1].style.bottom = tmp[1].style.left = 0;
      tmp[2].style.top = tmp[2].style.left = 0;
      tmp[3].style.bottom = tmp[3].style.right = 0;
    }
    
    if (slideTransitions.postAnim()) {return;}
    setTimeout(slideTransitions.cornerOut, 50);
  },
  
  /* Windmill */
  windmill: function() {
    slideTransitions.buildPanels(4);
    slideTransitions.preAnim();
    
    var tmp = getElementsByClassName('transition-panel');
    
    if (slideTransitions.dir) {
      tmp[0].style.top = tmp[1].style.bottom = tmp[2].style.right = tmp[3].style.left = 0;
      tmp[0].style.left = tmp[1].style.right = tmp[2].style.top = tmp[3].style.bottom = '50%';
    }
    else {
      tmp[0].style.top = tmp[1].style.bottom = tmp[2].style.right = tmp[3].style.left = '50%';
      tmp[0].style.left = tmp[1].style.right = tmp[2].style.top = tmp[3].style.bottom = 0;
    }
    
    tmp[0].style.width = tmp[1].style.width = Math.round(slideTransitions.value / 2) + '%';
    tmp[0].style.height = tmp[1].style.height = '50%';
    
    tmp[2].style.width = tmp[3].style.width = '50%';
    tmp[2].style.height = tmp[3].style.height = Math.round(slideTransitions.value / 2) + '%';
    
    if (slideTransitions.postAnim()) {return;}
    setTimeout(slideTransitions.windmill, 50);
  },
  
  /* Fade */
  fade: function() {
    slideTransitions.buildPanels(1);
    slideTransitions.preAnim();
    
    var tmp = g('transition-container').getElementsByTagName('div')[0];
    tmp.style.height = '100%';
    tmp.style.width = '100%';
    (tmp.filters != null) ? tmp.style.filter = 'alpha(opacity=' + slideTransitions.value + ')' : tmp.style.opacity = slideTransitions.value / 100;
    
    if (slideTransitions.postAnim()) {return;}
    setTimeout(slideTransitions.fade, 50);
  },
  
  /* Transition variables */
  value: null,
  dir: null,
  smooth: 10,
  size: 5,
  color: '#000'
};