YUI().use('dial', function(Y) {

var sceneH = Y.one('#scene').get('region').height,

subSea = 450,

viewFrameH = Y.one('#view_frame').get('region').height -2,

zeroPt = 100,

originY = -sceneH + subSea + viewFrameH - zeroPt;

Y.one('#scene').setStyle('top', originY + 'px');

setSceneY = function(e) {

Y.one('#scene').setStyle('top', (originY + (e.newVal * 10)) + 'px');

}

var dial = new Y.Dial({

min:-35,

max:559,

stepsPerRevolution:30,

value: 0,

diameter: 100,

minorStep: 1,

majorStep: 10,

decimalPlaces: 2,

strings:{label:'Altitude in Kilometers:', resetStr: 'Reset', tooltipHandle: 'Drag to set'},

// construction-time event subscription

after : {

valueChange: Y.bind( setSceneY, dial )

}

});

dial.render('#demo');

// Function that calls a method in Dial that sets its value to the value of the max config attribute

// Other methods available include,

// _setToMin(), _resetDial(), _incrMinor(), _decrMinor(), _incrMajor(), _decrMajor(),

var setDialToMax = function(){

this._setToMax();

}

// Subscribe to the click of the "Hubble" anchor, passing the dial as the 'this'

Y.on('click', setDialToMax, '#a-hubble', dial);

});