Event.observe(window, 'load', function() {
    
    var ajax_url = '/json_funcs.php';
    var image_url = 'http://cam.devkelp.com/Webcam_Controller/getImage/';
    var shots_limit = 20;
    
    
    var first = 1;
    
  function initPage(){
    getViewList();
    
    $('view-list').observe('change',  getImageList);
    $('image-list').observe('change', updateImage);
  }
  initPage();
  
  function getViewList(){
    new Ajax.Request(ajax_url,{
      method : 'GET',
      parameters: {
        action: 'get_views'
      },
      onSuccess: updateViewList,
      onFailure: handleAjaxFailure
    });
  }
  
  
  function updateViewList(transport){
    var list = transport.responseText.evalJSON();

 
    var vl = $('view-list');
    vl.innerHTML ="";
    $H(list).keys().each(function(view){
      var o = new Element('option', {'value': view }).update(list[view]);
      vl.appendChild(o);
    });
    getImageList();
    
  }
  
  
  function getImageList(){
    var elem = $('view-list');
  
    new Ajax.Request(ajax_url,{
      method     : 'GET',
      parameters : {
        action: 'get_shots',
        limit:  shots_limit,
        view: $('view-list').value
      },
      onSuccess: updateImageList,
      onFailure: handleAjaxFailure
    });
  }
  
  
  
  function updateImageList(transport){
    var list = transport.responseText;
    var images = list.evalJSON(list);
    
    var il = $('image-list');
    il.innerHTML ="";
  
    if(list == "[]"){
      return;	
    }	
    
    $H(images).keys().each(function(k){      
      var o = new Element('option', {'value': k }).update(images[k]);
      il.appendChild(o);
    });
    if(first){
      first = 0;
    }else{
      $('webcam-image').writeAttribute("src", image_url+il.value);
    }
  }
  
  function updateImage(event){
    var elem = event.element();
    $('webcam-image').writeAttribute("src", image_url +$('image-list').value);
  }
  
  
  function handleAjaxFailure (transport){
    console.log("Ajax failure: " + transport.responseText);
  }
  
});