cubenx = {};
/**
 * @constructor
 */
cubenx.music = function(heightWinFactor, heightDialogFactor, animationOnClose, centerItem) {
  cubenx.heightWinFactor = heightWinFactor;
  cubenx.heightDialogFactor = heightDialogFactor;
  this.animationOnClose = animationOnClose;
  cubenx.toCenter = centerItem;
};

cubenx.music.prototype.init = function() {
   $('.bodys').css('display', 'none');
   $('.bodys').fadeIn(200);
   this.registerWindowEvents();
   this.initializeMenu();
   this.initializeAccordion();
   cubenx.centerItem();
   this.registerBounceAnimation();
   var contenido_cuadro = $('contenido_cuadro');
   if (cubenx.isDefAndNotNull(contenido_cuadro) && this.animationOnClose) {
      this.registerCerrarAction();
   }
   cubenx.inAnimation = false;
};

cubenx.music.prototype.registerCerrarAction = function() {
   $('cerrar').click(this.onCerrar);
};

cubenx.music.prototype.onCerrar = function() {
   $('contenido_cuadro').animate({'height': 200, 'width': 200}, 200, function(){});
};

cubenx.music.prototype.initializeAccordion = function() {
   $('#accordion').accordion({
      active:false,
      collapsible:true,
   });
};

cubenx.music.prototype.initializeMenu = function() {
   $('a.transition').click(this.onDisplayDialogTransition);
};

cubenx.music.prototype.registerBounceAnimation = function() {
   $('.run').click(this.bounceAnimation);
};

cubenx.music.prototype.bounceAnimation = function(event) {
   event.preventDefault();
   if (cubenx.inAnimation)
      return;
   if (mySound) {
      mySound.play();
   }
   cubenx.inAnimation = true;
   cubenx.heightArray = [];
   cubenx.heightIndex = 0;
   var minWidth = 5;
   var maxWidth = 200;
   var minHeight = 5;
   var maxHeight = 600;

   var width = cubenx.randomXToY(minWidth, maxWidth);
   var height = cubenx.randomXToY(minHeight, maxHeight);
   
   var originalDim = {'width': 140, 'height' : 140};
   var firstDim = {'width' : width, 'height' : height};
   var firstAnim = {'duration': 10, 'easing': 'quadEaseOut', complete: cubenx.centerItemAnim};
   var finalAnim = {'duration': 10, 'easing': 'quadEaseOut', complete: cubenx.centerItemAnimFinal};
   
   var heightDifference, widthDifference;
   if (width > height) {
      heightDifference = Math.abs((height - 140));
      widthDifference = Math.abs((width - 200));
   } else {
      heightDifference = Math.abs((height - 140));
      widthDifference = Math.abs((width - 200));
   }
   var heightDifference = Math.abs((height - 140));
   if (height > 140) {
      var current = 140;
      var incrementalWidth = 140;
      for (i=0;i<heightDifference;i+=8) {
         current += i;
         var percent = (current * 100) / height;
         var currentWidth = Math.round((percent / 100) * width);
         if (width > 140) {
            incrementalWidth += currentWidth;
         } else {
            incrementalWidth -= currentWidth;
         }
         if (current < height) {
            cubenx.heightArray.push(current);
            $('#cuadro').animate({'width' : incrementalWidth, 'height' : current}, firstAnim);
         } else {
            break;
         }
      }
   } else {
     var current = 140;
     var incrementalWidth = 140;
     for (i=0;i<heightDifference;i+=8) {
         current -= i;
         var percent = (current * 100) / height;
         var currentWidth = Math.round((percent / 100) * width);
         if (width > 140) {
            incrementalWidth += currentWidth;
         } else {
            incrementalWidth -= currentWidth;
         }
         if (current > height) {
            cubenx.heightArray.push(current);
            $('#cuadro').animate({'width' : incrementalWidth, 'height' : current}, firstAnim);
         } else {
            break;
         }
      }
   }
   if (width > 200) {
      var current = 200;
      var incrementalHeight = height;
      for (i=0;i<widthDifference;i+=8) {
         current -= i;
         var percent = (current * 100) / width;
         var currentHeight = Math.round((Math.abs(percent) / 100) * height);
         if (height > 140) {
            incrementalHeight -= currentHeight;
         } else {
            incrementalHeight += currentHeight;
         }
         if (width > 200) {
            cubenx.heightArray.push(incrementalHeight);
            $('#cuadro').animate({'width' : current, 'height' : incrementalHeight}, firstAnim);
         } else {
            break;
         }
      }
   } else {
      var current = 200;
      var incrementalHeight = height;
      for (i=0;i<widthDifference;i+=8) {
         current += i;
         var percent = (current * 100) / width;
         var currentHeight = Math.round((Math.abs(percent) / 100) * height);
         if (height > 140) {
            incrementalHeight -= currentHeight;
         } else {
            incrementalHeight += currentHeight;
         }
         if (current < 200) {
            cubenx.heightArray.push(incrementalHeight);
            $('#cuadro').animate({'width' : current, 'height' : incrementalHeight}, firstAnim);
         } else {
            break;
         }
      }
   }
   var lastWidthDifference = 200 - 140;
   var current = 200;
   for (i=0;i<lastWidthDifference;i+=8) {
      current -= i;
      var percent = (current * 100) / 140;
      var currentHeight = Math.round((percent / 100) * 140);
      if (current > 140) {
         //console.log(current);
         cubenx.heightArray.push(current);
         $('#cuadro').animate({'width' : current, 'height' : currentHeight}, firstAnim);
      } else {
         cubenx.heightArray.push(140);
         //cubenx.animHeight = 140;
         $('#cuadro').animate({'width' : 140, 'height' : 140}, finalAnim);
         break;
      }
   }
   //$('#cuadro').animate(originalDim, afterFirstAnim);
};

cubenx.randomXToY = function(minVal,maxVal) {
   var randVal = minVal + (Math.random() * (maxVal - minVal));
   return Math.round(randVal);
};

cubenx.music.prototype.onDisplayDialogTransition = function(event) {
   event.preventDefault();
   var aElement = cubenx.isDefAndNotNull(event.target) ? event.target : event.srcElement;
   var elements = $(aElement).parent();
   aElement = elements[0];
   var url = aElement.href;
   $('.bodys').fadeOut(200, function() {
      window.location = url;
   });
};

cubenx.music.prototype.registerWindowEvents = function() {
   $(window).load(this.displayPage);
   $(window).unload(this.displayPage);
   $(window).resize(cubenx.centerItem);
};

cubenx.music.prototype.displayPage = function(event) {
   $('bodys').fadeIn(200);
};

cubenx.centerItemAnim = function() {
   var index = cubenx.heightIndex;
   cubenx.heightIndex++;
   var currentHeight = cubenx.heightArray[index];
   console.log('current: ' + currentHeight);  
   var theItem = cubenx.toCenter;
   var winHeight=$(window).height();
   var windowMiddle=winHeight/2;
   var itemMiddle=currentHeight/2;
   var theMiddle=windowMiddle-itemMiddle;
   console.log(theMiddle - 85);
   $(theItem).css('top',theMiddle - 85);
}

cubenx.centerItemAnimFinal = function() {
   var index = cubenx.heightIndex;
   cubenx.heightIndex++;
   var currentHeight = cubenx.heightArray[index];
   console.log('current: ' + currentHeight);
   var theItem = cubenx.toCenter;
   var winHeight=$(window).height();
   var windowMiddle=winHeight/cubenx.heightWinFactor;
   var itemMiddle=currentHeight/cubenx.heightDialogFactor;
   var theMiddle=windowMiddle-itemMiddle;
   console.log(theMiddle);
   $(theItem).css('top',theMiddle);
   cubenx.inAnimation = false;
}


cubenx.centerItem = function() {
   var theItem = cubenx.toCenter;
   var winHeight=$(window).height();
   var windowMiddle=winHeight/cubenx.heightWinFactor;
   var itemMiddle=$(theItem).height()/cubenx.heightDialogFactor;
   var theMiddle=windowMiddle-itemMiddle;
   if(winHeight>$(theItem).height()){
      $(theItem).css('top',theMiddle);
   } else {
      $(theItem).css('top','0');
   }
};

cubenx.isDefAndNotNull = function(val) {
   return val != null;
};