$(function() {
   // default values
   var colours = {'0' : "",
                  '10' : "bordeax red",
                  '20' : "deep black",
                  '30' : "fiery red",
                  '40' : "golden orange",
                  '50' : "ornately olive",
                  '60' : "precious gold",
                  '70' : "pretty pink",
                  '80' : "racing green",
                  '90' : "royal blue",
                  '100' : "shotgun grey",
                  '110' : "silver shimmer",
                  '120' : "solid bronze",
                  '130' : "turquoise sea",
                  '140' : "violet light"
                  };
   function getCircles(type)
   {
      return {'0' : "", 
              '10' : "images/puttpucks/" + type + "/bordeaux_red.png", 
              '20' : "images/puttpucks/" + type + "/deep_black.png",
              '30' : "images/puttpucks/" + type + "/fiery_red.png",
              '40' : "images/puttpucks/" + type + "/golden_orange.png",
              '50' : "images/puttpucks/" + type + "/ornately_olive.png",
              '60' : "images/puttpucks/" + type + "/precious_gold.png",
              '70' : "images/puttpucks/" + type + "/pretty_pink.png",
              '80' : "images/puttpucks/" + type + "/racing_green.png",
              '90' : "images/puttpucks/" + type + "/royal_blue.png",
              '100' : "images/puttpucks/" + type + "/shotgun_grey.png",
              '110' : "images/puttpucks/" + type + "/silver_shimmer.png",
              '120' : "images/puttpucks/" + type + "/solid_bronze.png",
              '130' : "images/puttpucks/" + type + "/turquoise_sea.png",
              '140' : "images/puttpucks/" + type + "/violet_light.png"
             };
   }
   // init default values
   $('#ic_callout').text(colours[30]).fadeIn('fast');
   $('#mc_callout').text(colours[110]).fadeIn('fast');
   $('#oc_callout').text(colours[90]).fadeIn('fast');
   
   $('#inner').css('background', 'url(images/puttpucks/inner/fiery_red.png) no-repeat').css('opacity', '1');
   $('#middle').css('background', 'url(images/puttpucks/middle/silver_shimmer.png) no-repeat').css('opacity', '1');
   $('#outer').css('background', 'url(images/puttpucks/outer/royal_blue.png) no-repeat').css('opacity', '1');
   
   $('#inner_hex').val(colours[30]);
   $('#middle_hex').val(colours[110]);
   $('#outer_hex').val(colours[90]);
   // inner circle
   function InnerCircle(colorCode)
   {
      var icircles = getCircles('inner');
      this.code = colorCode;
      this.imgPath = icircles[colorCode];
   }
   // Middle circle  class
   function MiddleCircle(colorCode)
   {
      var mcircles = getCircles('middle');
      this.code = colorCode;
      this.imgPath = mcircles[colorCode];
   }
   // outer circle  class
   function OuterCircle(colorCode)
   {
      var ocircles = getCircles('outer');
      this.code = colorCode;
      this.imgPath = ocircles[colorCode];
   }
   // sliders config
   var minValue = 10;
   var maxValue = 140;
   var sliderStep = 10;
   // hide sliders callouts
   // define innercircle slider with x possible colours
   $("#innercircle_slider").slider({
      handle: '#icircle_handle',
      value:40,
      min: minValue,
      max: maxValue,
      step: sliderStep,
      start : function(event, ui) {
              $('#ic_callout').fadeIn('fast');
            },
      stop : function(event, ui) {
              $('#inner_hex').val(colours[ui.value]);
            },
      slide: function(event, ui) {
              var inner = new InnerCircle(ui.value);
              $('#ic_callout').text(colours[ui.value]);
              $('#inner').hide().css('background', 'url(' + inner.imgPath + ') no-repeat').fadeIn(200);
           }
    });
    
    // define innercircle slider with x possible colours
   $("#middlecircle_slider").slider({
      handle: '#mcircle_handle',
      value:110,
      min: minValue,
      max: maxValue,
      step: sliderStep,
      start : function(event, ui) {
              $('#mc_callout').fadeIn('fast');
            },
      stop : function(event, ui) {
              $('#middle_hex').val(colours[ui.value]);
            },
      slide: function(event, ui) {
              var middle = new MiddleCircle(ui.value);
              var current = parseInt(ui.value);
              $('#mc_callout').text(colours[ui.value]);
              $('#middle').hide().css('background', 'url(' + middle.imgPath + ') no-repeat').fadeIn(200);
           }
    });
    
    // define innercircle slider with x possible colours
   $("#outercircle_slider").slider({
      handle: '#ocircle_handle',
      value:90,
      min: minValue,
      max: maxValue,
      step: sliderStep,
      start : function(event, ui) {
              $('#oc_callout').fadeIn('fast');
            },
      stop : function(event, ui) {
              $('#outer_hex').val(colours[ui.value]);
            },
      slide: function(event, ui) {
              var outer = new OuterCircle(ui.value);
              var current = parseInt(ui.value);
              $('#oc_callout').text(colours[ui.value]);
              $('#outer').hide().css('background', 'url(' + outer.imgPath + ') no-repeat').fadeIn(0);
           }
    });
});