// call this function
function autoCompleteHandler(item, targetId, rooturl, action) {    
    oAutoComplete = new cAutoComplete();
    oAutoComplete.init(item, targetId, rooturl, action);    
}


// object cAutoComplete
function cAutoComplete() {   
    
    this.init = function(item, targetId, rooturl, action) {       
             
        this.item = item;                     // item that occurs the event
        this.itemValue = this.item.value;     // the search value the user types in the textfield
        this.targetId = targetId;             // iframe is shown in this id
        this.rooturl = rooturl;               // {$smarty.const.ROOTURL}         
        this.action = action;                 // action determines to show or to hide the iframe
        this.delay = 100;                     // delay the autocomplete process a bit
        this.minimalchars = 2;                // start autocomplete after x chars     
                
        
        if(this.action == 'show') {           
            // start autocomplete process
            
            // call the delay function                                
            this.delayProcess(this.delay);             
        }
        else {                                
            // stop autocomplete process and hide iframe
            this.hide();  
        }
                
    };               
        
    // delay autocomplete suggestions and call the handler
    this.delayProcess = function(iMiliSec) {                
        setTimeout("oAutoComplete.handler()", iMiliSec);   // hier kun je niet met this.handler() werken vandaar oAutoComplete.handler()             
    };    
    
    
    // replace document.getElementById function
    this.getId = function(id) {
        return document.getElementById(id);
    };    
    
    
    // handler    
    this.handler = function() {                                                
        if(this.minimalChars(this.minimalchars)) {                    
            // show suggestions in iframe
            oAutoComplete.show();    
        }
        else {
            // hide the iframe
            this.hide();            
        }
    };
    
    
    // start autocomplete after x-amount of chars
    this.minimalChars = function(iMinimalChars) {
        
        if(this.itemValue.length >= iMinimalChars) {
            return true;
        }              
    };
    
    
    // filter input 
    // @TODO : nog verder uitwerken
    this.filterInput = function() {
      
        var sValue = this.itemValue;
        
        sValue = sValue.replace(' ', ',');       // vervang spatie door komma 
        return sValue;
    };
                                                              
    // showtime !!
    this.show = function() {
        
        // show targetId
        this.getId(this.targetId).style.display = 'block';               
                      
                      
        var sValue;
        sValue = this.filterInput();
                      
        // load iframe         
        this.getId(this.targetId).innerHTML = "<iframe id=autoCompleteDropDown name=autoCompleteDropDown src= " + this.rooturl + "iframe/autoComplete.php?targetid="+ this.targetId + "&inputvalue=" + sValue + " frameborder=0></iframe>";                                   
    
                                                                         
        // determine top position of iframe
        if(this.targetId == 'iframeAuteur') {            
            this.getId('autoCompleteDropDown').style.top = '240px';               
        }
        else if(this.targetId == 'iframeCategorie'){
            this.getId('autoCompleteDropDown').style.top = '370px';               
            this.getId('autoCompleteDropDown').style.height = '70px';
        }        

        
        // set height of iframe
        var iAantal;
        // ajax call om de searchString te filteren                       
        var oRequest = new cRequest();                      
        oRequest.sUrl = this.rooturl + "iframe/autoComplete.php?targetid=iaantalresults&inputvalue=" + sValue; 
        oRequest.sType = 'GET';       
        iAantal = eval("("+  oRequest.getContent().responseText + ")");             // get aantal results items      
        composeIframe(iAantal, 'autoCompleteDropDown');
        
    };        
    

    // hide iframe
    this.hide = function() {            

        // check if iframe exists
        if(this.getId('autoCompleteDropDown')) {          
        
            // hide targetId
            getId(this.targetId).style.display = 'none';  
        }        

    };    
    
    
}



/**
* @desc this function is called
*/
function composeIframe(aantal, targetId) {    
    oIframe = new cIframe();
    oIframe.init(aantal, targetId);    
}


// object cIframe
function cIframe() {
    
    this.init = function(aantal, targetId) { 
        
        this.iAantal = aantal;                // action determines to show or to hide the iframe
        this.targetId = targetId;             // target id 
        this.rooturl = sRootUrl;              // rooturl        
    
        this.iHeightIframe = 140;             // default iframe height 
        this.iItemHeight = 19;                // height item
        this.iMaxHeightIframe = 200;          // max height iframe
        
        //this.IEVersion = '';                  // IE browser version
        this.IEVersion = 999; // we assume a sane browser
        
        this.browser();                       // check IE browser version
        this.calcHeight();                    // set height of iframe 
    }
    
        
    // clac iframe height based on amount of items in it
    this.calcHeight = function() {                
            
        // voor IE6 iets langer maken anders zie je scroll balken
        if(this.IEVersion == 6) {
            this.iHeightIframe = (25 * this.iAantal);                     // calc iHeight                            
        }  
        else {
            this.iHeightIframe = (this.iItemHeight * this.iAantal);                     // calc iHeight                            
        }
        
        //this.iHeightIframe = (this.iHeightIframe > this.iMaxHeightIframe ? this.iMaxHeightIframe : this.iHeightIframe);    // check with iMaxHeight                
        this.setHeight();  // set the height         
    }
    
    
    
    // check IE version
    this.browser = function() {    
        
        if (navigator.appVersion.indexOf("MSIE") != -1) {        
            this.IEVersion = parseFloat(navigator.appVersion.split("MSIE")[1]);  // IE detected
        }
        else {
            this.IEVersion = 'geen IE';
        }
    }


    // @desc set iframe height 
    this.setHeight = function() {
                        
        document.getElementById('autoCompleteDropDown').style.height = this.iHeightIframe + 'px';
    }
       
}