jQuery throws out a wrong number? -

i'm working on simple roulette wheel using jquery.

i can spin wheel using jquery want strange reason jquery code spits out wrong number!

here code:

jquery code:

<script type="text/javascript">//<![cdata[  $(function(){         window.wheeloffortune = {              cache: {},              init: function () {                 console.log('controller init...');                  var _this = this;                 this.cache.wheel = $('.wheel');                 this.cache.wheelmarker = $('.marker');                 this.cache.wheelspinbtn = $('.wheel');                  //mapping backwards wheel spins clockwise //1=win                                this.cache.wheelmapping = [5,24,16,33,1,20,14,31,9,22,18,29,7,28,12,35,3,26,0,32,15,19,4,21,2,25,17,34,6,27,13,36,11,30,8,23,10].reverse();                  this.cache.wheelspinbtn.on('click', function (e) {                     e.preventdefault();                     if (!$(this).hasclass('disabled')) _this.spin();                 });                  //reset wheel                 this.resetspin();                  //setup prize events                 this.prizeevents();             },              spin: function () {                 console.log('spinning wheel');                  var _this = this;                  // reset wheel                 this.resetspin();                  //disable spin button while in progress                 this.cache.wheelspinbtn.addclass('disabled');                  /*                     wheel has 10 sections.                     each section 360/10 = 36deg.                 */                 var deg = 1500 + math.round(math.random() * 1500),                     duration = 20000; //optimal 6 secs                  _this.cache.wheelpos = deg;                  //transition queuing                 //ff bug easeoutback                 this.cache.wheel.transition({                     rotate: '0deg'                 }, 0)                     .transition({                     rotate: deg + 'deg'                 }, duration, 'easeoutcubic');                  //move marker                 _this.cache.wheelmarker.transition({                     rotate: '-37deg'                 }, 0, 'snap');                  //just before wheel finish                 settimeout(function () {                     //reset marker                     _this.cache.wheelmarker.transition({                         rotate: '0deg'                     }, 300, 'easeoutquad');                 }, duration - 500);                  //wheel finish                 settimeout(function () {                     // did win??!?!?!                     var spin = _this.cache.wheelpos,                         degrees = spin % 360,                         percent = (degrees / 360) * 100,                         segment = math.ceil((percent / 4)),  //divided number of segments                         win = _this.cache.wheelmapping[segment - 1]; //zero based array                      console.log('spin = ' + spin);                     console.log('degrees = ' + degrees);                     console.log('percent = ' + percent);                     console.log('segment = ' + segment);                     console.log('win = ' + win);                      //display dialog slight delay realise win or not.                     settimeout(function () {                         alert('you won '+win+'!');                         //window.open('http://form.jotformz.com/form/41336216871655?','_self',false);                     }, 1500);                      //re-enable wheel spin                     _this.cache.wheelspinbtn.removeclass('disabled');                  }, duration);              },              resetspin: function () {                 this.cache.wheel.transition({                     rotate: '0deg'                 }, 0);                 this.cache.wheelpos = 0;             }          }          window.wheeloffortune.init(); });//]]>    </script> 

html part simple:

<div class="wheel-wrap">     <img class="wheel" src="wheelhalf.png" />     <img class="marker" src="http://jquery4u.com/images/marker.png" /> </div> 

could please advise on this?

thanks in advance.

edit:

here jsfiddle: http://jsfiddle.net/4zs8a07c/

however, doesn't work in jsfiddle need include these 2 lines (jquery libs) html header.

  <script type="text/javascript" src="http://gasvehicular.net/fuelgas/ruleta//ruleta_files/jquery-1.11.0.js"></script>       <script type="text/javascript" src="http://gasvehicular.net/fuelgas/ruleta//ruleta_files/jquery.transit.min.js"></script> 

but have in html file , works fine locally (apart wrong number issue).

so, copy , paste code jsfiddle in blank html file , add 2 jquery links posted above in header of html page , should see working properly.

you're missing 0 in wheel mapping, added here:

         this.cache.wheelmapping = [5,24,16,33,1,20,14,31,9,22,18,29,7,28,12,35,3,26,0, 32,15,19,4,21,2,25,17,34,6,27,13,36,11,30,8,23,10].reverse(); 

the math bit off when calculating segment. new formula gets index of correct wheel mapping:

segment = math.ceil(((percent/100) * 36)),  

the above code worked me on jsfiddle had adjust wheelmapping marker line winning number on jsfiddle: http://jsfiddle.net/wf49mqaa/1/

adjusted wheelmapping on jsfiddle:

this.cache.wheelmapping = [1,20,14,31,9,22,18,29,7,28,12,35,3,26,0, 32,15,19,4,21,2,25,17,34,6,27,13,36,11,30,8,23,10,5,24,16,33].reverse();