var widget = null;
window.addEvent('domready', function(){
  widget = Runway.createOrShowInstaller(
      document.getElementById("the-widget"), {
        reflectivity : 0.3,
        reflectionExtent : 0.3,
      //  //"slideSize" : "number",
      //  spread : 0.6,
      //  centerSpread : 0.7,
        recede : 3.5,
      //  tilt : 70,
      //  //"horizon" : "number",   
        backgroundGradient : ['double'], //[ none, single, double ]
        //backgroundColor : #000000,
        //backgroundColorTop : #ffffff,
        //backgroundColorMiddle : #e8e8ff,
        //backgroundColorBottom : #ffffff,
      //  //"backgroundImageURL" : "string",
      //  //"backgroundImageAlign" : [ "left", "center", "right" ],
      //  //"backgroundImageRepeat" : [ "repeat", "norepeat" ],
      //  //"backgroundImageOpacity" : "number",   
      //  showTitle : 1,
        titleFontFamily : 'Arial',
        titleFontSize : '20',
        titleFontBold : '0',
        titleColor : '#999',
      //  showSubtitle : 1,
          // event handlers
          onReady: function() {
              widget.setRecords(records);
              widget.select(__middle); 
          },
          onSelect: function(index, id) {
              // This is how you get notified when a different image has been selected in the widget.
              var record = records[index];
              document.getElementById("selected-slide-title").innerHTML = record.title;
              document.getElementById("selected-slide-link").href = record.href;
          }
      }
  );
});