var scrollSelector;

Event.observe(window, 'load', function() {
	initScrollSelector();
});

function initScrollSelector(){
	var divPanelboxes = $$('div.panelboxes')[0];
	
	if (divPanelboxes) {
	
		divPanelboxes.select('.choosemobile').each(function(selector) {
			
			scrollSelector = new ScrollSelector(selector,65,90,3,0.8, gImagesPath, true);
		
		
			divPanelboxes.select('.mobileselect').each(function(options) {
				options.onchange = function() {
						scrollSelector.selectElementByName("dev" + options[options.selectedIndex].value)
					};
					
				var effect3=null;
				var eventListener = new EventListener( function(event) {
				
					var valueChanged = false;
					
					if (event.newValue == null) {
						if (options.value != null && options.value != "") {
							valueChanged = true;
							options[0].selected = true;
						}
						
					} else {
						if (event.newValue != "dev" + options.value) {
							for (var i = 0; i < options.length; i++) {
								
								if ( ("dev" + options[i].value) == event.newValue) {
									options[i].selected = true;
									valueChanged = true;
									break;
								}
							}
                                                        if (!valueChanged) {
                                                            options[0].selected = true;
                                                        }
						}
					}
					if (valueChanged) {
						if (effect3 != null && effect3.state != 'finished') {
							effect3.finish();
						}
						if (effect3 == null || (effect3.state == 'finished')) {
							effect3 = new Effect.Highlight(options, {startcolor: '#d1d8eb'});
						}
					}
					
				});
				
				scrollSelector.addEventListener(eventListener);
			});
		});
	}
}