var previewCache = new Array();
var isSliding = false;    
var ddlFilter;
var txtFilter;
var updPanel;  
var FilterOn = '';
var FilterValue = '';
          

function pageLoad(sender, args){
    
    FilterOn = $get(ddlFilter).value;
    FilterValue = $get(txtFilter).value;

    var autoComplete = $find('autoComplete');
    autoComplete.add_populating(function(){ 
        //  use the filter as the context key
        autoComplete.set_contextKey($get(ddlFilter).value);  
    }); 
    autoComplete.add_itemSelected(function(){
        FilterOn = $get(ddlFilter).value;
        FilterValue = $get(txtFilter).value; 
        //  force the panel to refresh
        __doPostBack(updPanel, '');
    });

    previewCache = new Array();

    var slider = $find('slider');
    
    //  if there are no results, then there is no slider, in that case, just return
    if (slider == null) return;

    //  let us know when the slider's value changes
    slider.add_valueChanged(sliderValueChanged);
    
    //  we only want to show the popup when the 
    //  user is moving the slider
    slider.add_slideStart(function(){ isSliding = true; });
    slider.add_slideEnd(function(){ isSliding = false; });
    
    var value = slider.get_Value();
    //  start fetching the first few preview's
    getPreview(value);
    //  prefetch the next few pages as well
    getPreview(value + 1);
    getPreview(value + 2);                    
}

function sliderValueChanged() {
    //  the user has changed the slider value, display the
    //  preview
    var value = $find('slider').get_Value();
    
    if(previewCache[value]){
        //  if we already have the value cached, use it
        showPreview(previewCache[value]);
    }
    else {
        //  else, start fetching it ...
        getPreview(value);
    }
    
    //  prefetch the next few pages as well
    getPreview(value + 1);
    getPreview(value + 2);                    
}

function onSuccess(result, userContext){
    //  cache the result
    previewCache[userContext] = result;
    
    var slider = $find('slider');
    
    // some times the slider is null, which shouldn't happen, but apparently doesn't cause and functional issues
    // having the following code did however, prevents the silly javascript error
    if (slider == null)
    {
        return;
    }
    
    if($find('slider').get_Value() == userContext && isSliding) {
        showPreview(result);
    }      
}

function showPreview(result) {
    var previewPopupBehavior = $find('previewPopup');
    var previewPopupElement = previewPopupBehavior.get_element();
 
    //  set the result to the innerHTML of the popup
    $get('body', previewPopupElement).innerHTML = 
        String.format('<em>{0}</em> to <em>{1}</em>', result.FirstRowPreview, result.LastRowPreview);
    
    $get('footer', previewPopupElement).innerHTML = 
        String.format('Page <em>{0}</em> of <em>{1}</em>, Items <em>{2}</em> through <em>{3}</em>', result.PageIndex, result.TotalPages, result.FirstRowIndex, result.LastRowIndex);
    
    if(!previewPopupBehavior.get_PopupVisible()) {
        //  show the popup
        previewPopupBehavior.showPopup();                  
    }
}

function getPreview(pageNumber) {
    if(!previewCache[pageNumber] && pageNumber <= $find('slider').get_Maximum()) {
        //  otherwise call the websevice and get the preview HTML
        PageMethods.GetPreview(pageNumber, FilterOn, FilterValue, onSuccess, function(){ alert('GetPreview Failed!'); }, pageNumber);                        
    }
}