javascript - Product builder with several variables -

i have product builder based on cycle2. there 2 main variables: size , handles.

i need add 2 colors variables (white , brown) , substitute click.function prev/next arrows.

being js newbie myself i'm making mess code , stuff.

everything slideshow based , every image dependant other values:

eg.

• i choose size, choose handles , color.
• but - - can change size, keeping same handles , color.

clicking on button take me next size/handle don't want same happen colorbox.

this demo designed:

here's html:

<div> <div>     <div class="cycle-slideshow" id="design-lab" data-cycle-fx=fade data-cycle-timeout=2000 data-cycle-paused=true>         <img src="img/slideshow/bag001.png">         <img src="img/slideshow/bag002.png">         <img src="img/slideshow/bag003.png">         <img src="img/slideshow/bag004.png">         <img src="img/slideshow/bag005.png">         <img src="img/slideshow/bag006.png">         <img src="img/slideshow/bag007.png">         <img src="img/slideshow/bag008.png">         <img src="img/slideshow/bag009.png">         <img src="img/slideshow/bag010.png">         <img src="img/slideshow/bag011.png">         <img src="img/slideshow/bag012.png">         <img src="img/slideshow/bag013.png">         <img src="img/slideshow/bag014.png">         <img src="img/slideshow/bag015.png">         <img src="img/slideshow/bag016.png">         <img src="img/slideshow/bag017.png">         <img src="img/slideshow/bag018.png">         <img src="img/slideshow/bag019.png">         <img src="img/slideshow/bag020.png">         <img src="img/slideshow/bag021.png">         <img src="img/slideshow/bag022.png">         <img src="img/slideshow/bag023.png">         <img src="img/slideshow/bag024.png">         <img src="img/slideshow/bag025.png">         <img src="img/slideshow/bag026.png">         <img src="img/slideshow/bag027.png">         <img src="img/slideshow/bag028.png">         <img src="img/slideshow/bag029.png">         <img src="img/slideshow/bag030.png">         <img src="img/slideshow/bag031.png">         <img src="img/slideshow/bag032.png">     </div> </div> <div>     <button class="change-btn" id="change-size">size</button>     <button class="change-btn" id="change-handle">handles</button>     <div class="colorpicker">         <button class="colorbox white" id="change-white"></button>         <button class="colorbox brown" id="change-brown"></button>     </div> </div> 

and here's js

var startingslidenumber = 0;  var startingsize = 0;  var startinghandle = 0;  var startingwhite = 0;  var startingbrown = 0;    $("#change-size").click(function () {      changeslide("size");  });  $("#change-handle").click(function () {      changeslide("handle");  });  $("#change-white").click(function () {      changeslide("white");  });  $("#change-brown").click(function () {      changeslide("brown");  });    $("#sendidea").click(function () {      var imagesrc = $('#design-lab img.cycle-slide-active').attr('src');      $('#image-attachment').empty();      $('#image-attachment').prepend('<img id="" src="' + imagesrc + '" />');      $('#bag').val(imagesrc);  });    function changeslide($param) {      var slideshows = $('#design-lab');      var currentslidenumber = slideshows.data("cycle.opts").currslide;        if ($param === "size") {          if (startingsize < 3) {              var gotonumber = currentslidenumber + 1;              startingsize++;          } else {              var gotonumber = currentslidenumber - 3;              startingsize = 0;          }      } else if ($param === "handle") {          if (startinghandle < 3) {              var gotonumber = currentslidenumber + 4;              startinghandle++;          } else {              var gotonumber = currentslidenumber - 4;              startinghandle = 0;          }      } else if ($param === "white") {          if (startingwhite < 3) {              var gotonumber = currentslidenumber + 8;              startingwhite++;          } else {              var gotonumber = currentslidenumber - 24;              startingwhite = 0;          }      } else if ($param === "brown") {          if (startingbrown < 3) {              var gotonumber = currentslidenumber + 12;              startingbrown++;          } else {              var gotonumber = currentslidenumber - 20;              startingbrown = 0;          }      }      $(slideshows).cycle('goto', gotonumber);  }    });

thank support! r