<script language="Javascript" 
	src="http://www.locationbox.net/locationboxus/services?
	Key=key&Cmd=APIV2&Typ=JS"></script>

<script language="JavaScript">
var mapper  = new IMapper();

function startup() {
  mapper.initMap(40.2, 35.1, 4);
  mapper.addNavigationPanel();
  return;
} 

function initilazeLayer(){
  var render_style_l01 = mapper.createColorStyle("cs1",colorSeries["YlBr5"].fill[0], 1, colorSeries["YlBr5"].stroke[0], 0.1, 3);
  var render_style_l02 = mapper.createColorStyle("cs2", colorSeries["YlBr5"].fill[1], 1,colorSeries["YlBr5"].stroke[1], 0.1, 3);
  var render_style_l03 = mapper.createColorStyle("cs3", colorSeries["YlBr5"].fill[2], 1, colorSeries["YlBr5"].stroke[2], 0.1, 3);
  var render_style_l04 = mapper.createColorStyle("cs4", colorSeries["YlBr5"].fill[3], 1, colorSeries["YlBr5"].stroke[3], 0.1, 3);
  var render_style_l05 = mapper.createColorStyle("cs5", colorSeries["YlBr5"].fill[4], 1, colorSeries["YlBr5"].stroke[4], 0.1, 3);

  var styles = [render_style_l01, render_style_l02, render_style_l03, render_style_l04, render_style_l05];
  
  var bkt1 = mapper.createRangedBucket(0, -99999, 3273622);
  var bkt2 = mapper.createRangedBucket(1, 3273622, 6261310);
  var bkt3 = mapper.createRangedBucket(2, 6261310, 11288619);
  var bkt4 = mapper.createRangedBucket(3, 11288620, 30971320);

  var buckets = [bkt1, bkt2, bkt3, bkt4];

  var bucketStyle = mapper.createBucketStyle('my_adv_buckets', styles , buckets, 'custom', 4, 'linear');
  layer.createVectorLayer("State", "state",null,bucketStyle,true, null,null,null);
}

$(document).ready( function()
{
 $('#demo-htmlselect').ddslick({
          width: "220px",
    background: "#cccccc",
    selectText: "Select color palette",
            onSelected: function () {
                var ddData = $('#demo-htmlselect').data('ddslick');
                displaySelectedData(ddData);
      }});
    });

var colorSeries = {
  
"YlBl3": {   classes:3,
                 imgFileName:"mh10_3.png",
                 fill: [0xEDF8B1, 0x7FCDBB, 0x2C7FB8],
                 stroke:[0xB5DF9F, 0x72B8A8, 0x2872A6],
                 limit:[0xFAFDE8, 0xD9F0EB, 0xC0D9EA]
  },
  
"YlBl5": {   classes:5,

                 imgFileName:"mh10_5.png",
                 fill:[0xFFFFCC, 0xA1DAB4, 0x41B6C4, 0x2C7FB8, 0x253494],
                 stroke:[0xE6E6B8, 0x91BCA2, 0x3AA4B0, 0x2872A6, 0x212F85],
                 limit:[0xFFFFEB, 0xE3F1E8, 0xD9F0F3, 0xC0D9EA, 0xBEC2DF]
},
 
 "YlBr3": {classes:3,
                 imgFileName:"mh11_3.png",
                  fill:[0xFFF7BC, 0xFEC44F, 0xD95F0E],
                 stroke:[0xE6DEA9, 0xE5B047, 0xC5360D],
                 limit:[0xFFFDEB, 0xFFEDCA, 0xF4CFB7]
  
},
  
"YlBr5": {classes:5,
                 imgFileName:"mh11_5.png",
                 fill:[0xFFFFD4, 0xFED98E, 0xFE9929, 0xD95F0E, 0x993404],
                 stroke:[0xE6E6BF, 0xE5C380, 0xE58A25, 0xC35663, 0x8A2F04],
                 limit:[0xFFFFF2, 0xFFF4DD, 0xFFE0BF, 0xF0BFC5, 0xE0C2B4]
    },
    
"Purples5": {classes:5,
                 imgFileName:"mh11_5.png",
                 fill:[0xf2f0f7, 0xcbc9e2, 0x9e9ac8, 0x756bb1, 0x54278f],
                 stroke:[0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3],
                 limit:[0xFFFFF2, 0xFFF4DD, 0xFFE0BF, 0xF0BFC5, 0xE0C2B4]
    },
    
"Blues5": {classes:5,
                 imgFileName:"mh11_5.png",
                 fill:[0xEFF3FF, 0xbdd7e7, 0x68aed6, 0x3182bd, 0x18519C],
                 stroke:[0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3],
                 limit:[0xFFFFF2, 0xFFF4DD, 0xFFE0BF, 0xF0BFC5, 0xE0C2B4]
    },
"Greens5": {classes:5,
                 imgFileName:"mh11_5.png",
                 fill:[0xedf8e9, 0xbae4b3, 0x74c476, 0x31a354, 0x116d2c],
                 stroke:[0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3],
                 limit:[0xFFFFF2, 0xFFF4DD, 0xFFE0BF, 0xF0BFC5, 0xE0C2B4]
    },  
"Greys5": {classes:5,
                 imgFileName:"mh11_5.png",
                 fill:[0xf7f7f7, 0xcccccc, 0x969696, 0x636363, 0x454545],
                 stroke:[0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3],
                 limit:[0xFFFFF2, 0xFFF4DD, 0xFFE0BF, 0xF0BFC5, 0xE0C2B4]
    },
"Oranges5": {classes:5,
                 imgFileName:"mh11_5.png",
                 fill:[0xfeedde, 0xfdb385, 0xfd8d3c, 0xe6550d, 0xa63603],
                 stroke:[0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3],
                 limit:[0xFFFFF2, 0xFFF4DD, 0xFFE0BF, 0xF0BFC5, 0xE0C2B4]
    },
"Reds5": {classes:5,
                 imgFileName:"mh11_5.png",
                 fill:[0xfee5d9, 0xfcae91, 0xfb6a4a, 0xde2d26, 0xa50f15],
                 stroke:[0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3],
                 limit:[0xFFFFF2, 0xFFF4DD, 0xFFE0BF, 0xF0BFC5, 0xE0C2B4]
    }
};

function displaySelectedData(ddData)
{
  if(map)
  setStyle(ddData.selectedData.value);
}

function setStyle(styleName) 
{ 
  var numClasses = colorSeries[styleName].fill;
 
  var newRenderingStyle = null; 

  var render_style_l01 = mapper.createColorStyle("cs1", numClasses[0], 1, colorSeries[styleName].stroke[0], 0.1, 3);
  var render_style_l02 = mapper.createColorStyle("cs2", numClasses[1], 1,colorSeries[styleName].stroke[1], 0.1, 3);
  var render_style_l03 = mapper.createColorStyle("cs3", numClasses[2], 1, colorSeries[styleName].stroke[2], 0.1, 3);
  var render_style_l04 = mapper.createColorStyle("cs4", numClasses[3], 1, colorSeries[styleName].stroke[3], 0.1, 3);
  var render_style_l05 = mapper.createColorStyle("cs5", numClasses[4], 1, colorSeries[styleName].stroke[4], 0.1, 3);

  var styles = [render_style_l01, render_style_l02, render_style_l03, render_style_l04, render_style_l05];
  
  var bkt1 = mapper.createRangedBucket(0, -99999, 3273622);
  var bkt2 = mapper.createRangedBucket(1, 3273622, 6261310);
  var bkt3 = mapper.createRangedBucket(2, 6261310, 11288619);
  var bkt4 = mapper.createRangedBucket(3, 11288620, 30971320);

  var buckets = [bkt1, bkt2, bkt3, bkt4];
 
  var bucketStyle = mapper.createBucketStyle('my_adv_buckets', styles , buckets, 'custom', colorSeries[styleName].classes);
  layer.setJDBCRenderingStyle("state",bucketStyle);
 
}
    
</script>