function brpRouteListWidget(opts, container,routeWidget){
	
	// properties
	var me=this;
	
    me.container = $(container);
    me.routewidget = routeWidget;
    me.pagecnt =0;
    me.items = [];
    me.pageindex =0;
    me.validcnt =0;
    me.firstTime = true;
    me.listloaded = false;
    
    //handlers
    $('.routeInfoBtn').click(function(){ me.ShowListWindow(0)});
    $('#routelist-options-lf').click(function(){ me.ShowListWindow(0)});
    $('#routelist-options-system').click(function(){ me.ShowListWindow(1);me.applyFilter();});
    $('#routelist-options-user').click(function(){ me.ShowListWindow(2);me.applyFilter();});
    $('.close ',$('#routeInfoWindow')).click(function(){ me.HideListWindow()});
    $('#show_map',$('#route_list')).click(function(){me.HideListWindow()});
	$('#mapdestroy').click(function(){ me.ShowMapWindow()});
    $('#show_route_list',$('.browser_holder')).click(function(){ me.ShowListWindow()});
    $('#show_map_right',$('#route_list')).click(function(){me.HideListWindow()});
    $('#show_route_list_right',$('.browser_holder')).click(function(){ me.ShowListWindow()});
    $('#filterApply').click(function(){ me.applyFilter();});    
    
    me.PopulateCombo();

	me.getRouteList();
    
    $('.left',me.container).click(function(){ me.movetoPage(-1);});
    $('.right',me.container).click(function(){ me.movetoPage(1);});
    $('.first',me.container).click(function(){ me.renderPage(0);});
    $('.last',me.container).click(function(){ me.renderPage(me.pagecnt);});
    $('div#route_detail .left').click(function(event){ me.movetoDetailPage(event,-1);});
    $('div#route_detail .right').click(function(event){ me.movetoDetailPage(event,1);});
    $('div#route_detail .first').click(function(event){ me.movetoDetailPage(event,-99);});
    $('div#route_detail .last').click(function(event){ me.movetoDetailPage(event,-98);});
        
    $('input#list_current_page').keyup(function(event){
        if (event.keyCode==13)
		    me.movetoPage(0);
    });
    
	$('input#list_current_page').focusout(function(event){
	  if (event && (event.keyCode==9))
	    me.movetoPage(0);
	  });
	
}

brpRouteListWidget.prototype.reset = function() {
    this.PopulateCombo();
    $('#searchtext').val('');
}
brpRouteListWidget.prototype.PopulateCombo = function() {
    //
    $('.landschap-list').empty();
    var me = this;
    var Prov = ['Groningen','Friesland','Drenthe','Overijssel','Gelderland','Utrecht','Noord-holland','Zuid-holland','Zeeland','Noord-brabant','Limburg'];
    var Geb = ['Duinen','Bossen','Polder','Heide','Heuvels','Meren','Rivieren'];
    var Score= ['Geen beoordeling','1 ster','2 sterren','3 sterren','4 sterren','5 sterren'];
    
    if (me.firstTime)
    {
        $('.provincie-list').empty();
        me.addP($('.provincie-list'),'(Heel nederland)');
        $.each(Prov, function(i,v) {
          me.addP($('.provincie-list'),v);
        });
    
        $(".provincie-list").dropdownchecklist( {icon: {}, width: 175, firstItemChecksAll: true, explicitClose: '...sluiten',zIndex: 999 } );
   
        $('.score-select').empty();     
        me.addP($('.score-select'),'(Alle beoordelingen)',-1);   
        $.each(Score, function(i,v) {
          me.addP($('.score-select'),v,i);  
        });
        $(".score-select").dropdownchecklist( {icon: {}, width: 175, firstItemChecksAll: true, explicitClose: '...sluiten',zIndex: 999 } );
        
        $('.afstand-select').empty();
        var d = $('.afstand-select');
        $(d).append($('<option></option>').val(-1).html('Alle afstanden'));
        for(km=25;km < 300;km+=25) {
            $(d).append($('<option></option>').val(km).html('van '+ (km-25) + ' km. tot ' + km +' km.'));
        }         


        me.firstTime = false;
    }
            
   // $.each(Geb, function(i,v) {
   //       me.addPList($('.landschap-list'),v);  
   //     });            
                        
}
brpRouteListWidget.prototype.addP = function(p,v,idx)
{
    if (idx == null)
        $(p).append($('<option value="' + v.toLowerCase() + '" selected ></option>').html('&nbsp;'+v));   
    else    
        $(p).append($('<option value="' + idx + '" selected ></option>').html('&nbsp;'+v));   
        
}
brpRouteListWidget.prototype.addPList = function(p,v,c,specid)
{
    var el;
    if(c)
      el = $('<input type=checkbox checked />');
    else
      el = $('<input type=checkbox />');  

    el.attr('value',v.toLowerCase());
    if(specid)
        el.attr('id',specid);
        
    var li = $('<li></li>');
    $(li).append(el);   
    $(li).append('&nbsp;'+v);   
    $(p).append(li);
}

brpRouteListWidget.prototype.getRouteList = function() {
    var me = this;
    me.listloaded = false;
    $.getJSON(frpgetRouteListUrl + '&callback=?', {}, function(data, textStatus) { me.afterGetRouteList(data, textStatus) });
};

brpRouteListWidget.prototype.afterGetRouteList = function(data, textStatus) {

  	function textLink(text){
		return '<a href="javascript:void(0);">' + text + '</a>'
	}

    
    $('.routelist', this.container).empty();
    var me = this;
    me.items.length =0;
    
    for(var I=0; I < data.length;I++) {
        var item = new brpRouteItem($('div#route-list-container'),data[I],me,I);
        me.items.push(item);
    }
    me.pagecnt = Math.ceil(data.length /6);
    me.validcnt = me.pagecnt;
    me.setDetailBrowser(); 
    me.listloaded = true;   
};

brpRouteListWidget.prototype.createRouteRowClickHandler = function(idx){
	var me = this;
	return function(event){me.RouteRowClicked(event, idx);}; 
};

brpRouteListWidget.prototype.RouteRowClicked = function(event, idx){
    this.routewidget.getRoute(idx);
	event.stopPropagation();    
};

brpRouteListWidget.prototype.ShowMapWindow = function(){
	$("#bar_open").addClass("bar_open_return");
	$('div#route_list').hide();
	$('div#route_detail').hide();
	$('div#map').show();
};
brpRouteListWidget.prototype.ShowDetailWindow = function(){
	$('div#route_list').hide();
	$('div#map').hide();
	pop.hide();
	$('div#route_detail').show();	
};

brpRouteListWidget.prototype.ShowInfoWindow = function(){
	$('div#route_list').hide();
	$('div#map').hide();
	$('div#route_detail').show();
	pop.hide();
};
brpRouteListWidget.prototype.ShowListWindow = function(opt){	
	
	if (!this.listloaded) {
	    alert('Een moment geduld de routelijst wordt nog geladen.');
	    return;
	}
	
	if ($("#bar_open").hasClass("bar_open_return"))
	{
	    $("#bar_open").removeClass("bar_open_return");
	    this.ShowDetailWindow();
	    return;
	}
	
	$('div#map').hide();
	pop.hide();
	$('div#route_detail').hide();
	$('div#route_list').show();
	switch(opt) {
	    case(0):
	        $('#cb_lf').attr('checked',true);
	        $('#cb_sys').attr('checked',false);
	        $('#cb_user').attr('checked',false);
	        break;	    
	    case(1):
	        $('#cb_lf').attr('checked',false);
	        $('#cb_sys').attr('checked',true);
	        $('#cb_user').attr('checked',false);
	        break;
	    case(2):
	        $('#cb_lf').attr('checked',false);
	        $('#cb_sys').attr('checked',false);
	        $('#cb_user').attr('checked',true);
	        break;    
	}
	this.renderPage(0);
};
brpRouteListWidget.prototype.HideListWindow = function(){
	$('div#route_detail').hide();
	$('div#route_list').hide();
	$('div#map').show();
};
brpRouteListWidget.prototype.HideInfoWindow = function(){
	$('div#route_list').hide();
	$('div#route_detail').hide();
	$('div#map').show();
};
brpRouteListWidget.prototype.movetoPage = function(dx){    
    var Idx =0;
    
    try {
      Idx= $('input#list_current_page').val() * 1 +dx;
    }catch(err){
      Idx =0;
    }
    if (isNaN(Idx)) Idx =0;     
    this.renderPage(Idx);
}
brpRouteListWidget.prototype.renderPage = function(Idx){    
    var itemcont = $('div#route-list-container');

    itemcont.empty();
        //use from map is the best solution so far;
    var cWidth = $('#map-widget').css('width').replace('px','') * 0.95 -3;
    var cHeight = $('#map-widget').css('height').replace('px','') * 1;
    var itemWidth = 168+10+4;// $('div.routeitemblock').width();
    var itemHeight= 256+10+10; //$('div.routeitemblock').height();
    var itemsX = Math.floor(cWidth / itemWidth);
    var itemsY = Math.floor(cHeight / itemHeight);   
    itemsY = (itemsY>0)? itemsY : 1;
    itemsX = (itemsX>0)? itemsX : 1;
    var me = this;
    me.pagecnt = Math.ceil(me.validcnt /(itemsX*itemsY));
    if (Idx <0)  Idx =0;
    if (Idx == 0)
        cHeight -= $('#route_filter').height();
    itemsY = Math.floor(cHeight / itemHeight);   
    itemsY = (itemsY>0)? itemsY : 1;
    if (Idx >me.pagecnt) Idx = me.pagecnt;
    var sI = (Idx ==0) ? 0 : (Idx-1)*(itemsX * itemsY);
    var eI = sI +((itemsX * itemsY)-1);

    if (Idx ==0){
        $('#route_filter').show();
        $('span.browserbar .left').addClass('left_off').removeClass('left');
        $('span.browserbar .right_off').addClass('right').removeClass('right_off');  
    }
    else
    {
        $('#route_filter').hide();
        if (eI >= this.items.length) eI = this.items.length-1;
        if (Idx == me.pagecnt)
          $('span.browserbar .right').addClass('right_off').removeClass('right');
        else
          $('span.browserbar .right_off').addClass('right').removeClass('right_off');  
        $('span.browserbar .left_off').addClass('left').removeClass('left_off');   
    }
    var page =me.pagecnt;
    $('input#list_current_page').val(Idx);
    $('span#list_last_page').html('&nbsp;van&nbsp;'+page);
    var invalid =0;
    var I=sI;
    while((I <= eI)&&(I+invalid < this.items.length)) {
       if ((this.items[I+invalid])&&(this.items[I+invalid].valid)){ 
        this.items[I+invalid].renderTemplate();
        I++;
       }
       else
        invalid++; 
    }
}

brpRouteListWidget.prototype.applyFilter= function(){
    var routeType='' ,minDist,maxDist;
    if ($('#cb_lf').is(':checked')) routeType +='L';
	if ($('#cb_sys').is(':checked')) routeType +='F';
	if ($('#cb_user').is(':checked')) routeType +='U';        
	
	var d = $('.afstand-select').val();
	if (d == -1){
	    minDist = 0;
	    maxDist = 999999;
	}
	else {
	    minDist = (d-25) * 1000;
	    maxDist = d * 1000;
	}
    var score =  1 * $('input',$('#rat')).val();	
    var key = $('#keyword').val().toUpperCase();
    var selectAll = $('.provincie-list option')[0].selected;
    var provincies = [];
    var scores = [];
    if (!selectAll){
       provincies = $('.provincie-list').val();
    }
    selectAll = (selectAll || (provincies == null) || (provincies.length == 0));

    var allScores = $('.score-select option')[0].selected;
    if (!allScores){
       scores = $('.score-select').val();
    }
    allScores = (allScores || (scores == null) || (scores.length == 0));

    var me = this;
    me.validcnt =0;
    for(var I=0;I< this.items.length;I++){
        var item = this.items[I];
        item.valid = true;
        item.valid =((routeType=='')||(routeType.indexOf(item.rtype)> -1));
        item.valid = ((item.valid) && (item.dist >= minDist) && (item.dist <= maxDist));
        if ((!allScores) &(item.valid)){
            item.valid = false;
            var Sc = item.scorecnt == 0 ? 0 : Math.round(item.score /item.scorecnt);
            $.each(scores, function(i,v) {
                item.valid = ((item.valid) ||(Sc == parseInt(v)));           
            });        
        }
        if ((!selectAll) &(item.valid)){
            item.valid = false;
            $.each(provincies, function(i,v) {
                item.valid = ((item.valid) ||(item.provincies.indexOf(v)>-1));           
            });
        }    
        if ((key !== '')&&(item.valid)){
            item.valid =((item.name.toUpperCase().indexOf(key) > -1) ||
                        (item.start.toUpperCase().indexOf(key) > -1) ||
                        (item.dest.toUpperCase().indexOf(key) > -1))
        }
        if(item.valid){
          me.validcnt++;  
          item.validIdx = me.validcnt;          
        }
    }
    if (me.validcnt ==0)
        alert('geen routes in de selectie');
    this.renderPage(0);
    $('span#detail_last_page').html('&nbsp;van&nbsp;'+this.validcnt);    
}

brpRouteListWidget.prototype.setDetailBrowser = function() {
   $('input#detail_current_page').val('0'); 
   $('span#detail_last_page').html('&nbsp;van&nbsp;'+this.validcnt);
}

brpRouteListWidget.prototype.movetoDetailPage = function(event,dx){    
    var Idx =0;
    if (dx == -98) {
        for(var I=0; I < this.items.length; I++){
            if (this.items[I].valid) 
                Idx =I;
        }
        $('input#detail_current_page').val(this.validcnt);
    }
    else
    if (dx == -99) {
         var I=0;
         while ((Idx ==0) &&(I < this.items.length)){
            if (this.items[I].valid) 
                Idx =I;
            I++;    
         }
         $('input#detail_current_page').val('0');
    }
    else {
        var itemNr =0;
        try {            
          itemNr= $('input#detail_current_page').val() * 1 +dx;
        }catch(err){
          itemNr =0;
        }
        if (isNaN(itemNr)) itemNr =0;
        
        $('input#detail_current_page').val(itemNr);
        var I=0;
        while ((itemNr >0) &&(I < this.items.length)){
            if (this.items[I].valid) 
                itemNr--;
            I++;    
        }
        Idx =I;
    }
    
    
    
    if (this.items[Idx]) 
        this.routewidget.getRoute(this.items[Idx].id,'A'); 
    if (event)
        event.stopPropagation();               
}


//######################################################################################//

function brpRouteItem(container,item,parent,Idx){
    var me = this;
    me.valid        = true;
    me.container    = container;
    me.id           = item.RouteID;
    me.name         = item.RouteName;
    me.rtype         = item.RouteType;
    me.score        = item.Score;
    me.scorecnt     = item.ScoreCnt;
    me.start        = item.StartPoint;
    me.dest         = item.EndPoint;
    me.dist         = item.RouteDist;
    if ((item.Pictures) && (item.Pictures != ""))
        me.pictures     = item.Pictures.split("|");
    else
        me.pictures = null;    
    me.reviews      = item.Reviews;
    me.partscores   = item.PartialScores;
    me.attribs      = item.Attributes;
    me.provincies   = item.Provincies;
    me.gemeenten    = item.Gemeenten;
    me.parent       = parent;
    me.validIdx = Idx;
}

brpRouteItem.prototype.createStar = function(id,minv,maxv) {
    var div = $('<div class="myscores" id="score'+id+'"></div>');
    var op = '<select name="rate">';
    for(var i=minv; i<=maxv;i++) {
        op += '<option value="'+i+'" /></option>';
    }
    op+='</select>';
    div.append(op);
    return div;
}


brpRouteItem.prototype.renderTemplate = function() {
    var me = this;
    var Sc = me.createStar(me.id,0,5);
    
    var block = $('<div></div>');
    block.addClass('routeitemblock');
    block.append($('<div class="soort '+me.rtype+'"></div>'));
    block.append($('<div class="star"></div>').html(Sc));
    var a = $('<a></a>').click(function(event){me.OptionClicked(event,'A')});
    a.addClass('routeitemblock_link');
    //a.attr('href','javascript:void(0);');
    a.attr('title',me.name);
    var img = $('<img class="firstimg"/>');
    img.attr('alt',me.name);
    
    if ((me.pictures)&&(me.pictures.length > 0))
    {
       img.attr('src',frpThumbUrl+me.pictures[0]);     
    }             
    else
    {
        img.attr('src','images/routelist/nophoto.jpg');
    }
    a.append(img);
    var sp = $('<div class="routeitem_title"></div>');
    sp.append(me.name);
    a.append(sp);
    block.append(a);
    block.append($('<div class="start"></div>').html((me.start) ? me.start : 'onbekend'));
    block.append($('<div class="dest"></div>').html((me.dest) ? me.dest : 'onbekend'));  
    var dist = $('<div class="results"></div>');
    dist.append($('<span class="dist"></span>').html(Math.round(me.dist /1000) + ' km.'));
    var time1 = Math.round(me.dist / 17000 * 60);
    dist.append($('<span class="time"></span>').html(time1 + ' min.'));
    block.append(dist); 
    var opt = $('<div class="options"></div>');
    opt.append($('<img src="images/spacer.gif" width=24 height=24 alt="informatie over deze route"></a>').click(function(event){me.OptionClicked(event,'I')}));    
    opt.append($('<img src="images/spacer.gif" width=28 height=24 alt="print deze route">').click(function(event){me.OptionClicked(event,'P')}));    
    opt.append($('<img src="images/spacer.gif" width=30 height=24 alt="mail deze route">').click(function(event){me.OptionClicked(event,'M')}));
    opt.append($('<img src="images/spacer.gif" width=26 height=24 alt="stuur de route naar mijn mobiel">').click(function(event){me.OptionClicked(event,'O')}));
    opt.append($('<img src="images/spacer.gif" width=26 height=24 alt="stuur de route naar mijn twitter">').click(function(event){me.OptionClicked(event,'T')}));
    opt.append($('<img src="images/spacer.gif" width=30 height=24 alt="beoordeel deze route">').click(function(event){me.OptionClicked(event,'R')}));
    block.append(opt);                    
    me.container.append(block);

    $(".myscores").stars({
		inputType: "select",
		disabled: true
	});
	$("#score"+this.id).stars("selectID", me.scorecnt >0 ? Math.round(me.score /me.scorecnt)-1:-1);

}
brpRouteItem.prototype.createOptionHandler = function(opt){
	var me = this;
	return function(event){me.OptionClicked(event, opt);}; 
};

brpRouteItem.prototype.OptionClicked = function(event, opt){
    
    var me = this;
    this.parent.routewidget.getRoute(this.id,opt,this.validIdx);
    if (event)
        event.stopPropagation();            
};

brpRouteItem.prototype.checkVisible= function visible(element) {   
    if (element.offsetWidth === 0 || element.offsetHeight === 0) 
        return false;   
    var height = document.documentElement.clientHeight,       rects = element.getClientRects(),       
    on_top = function(r) {         
        var x = (r.left + r.right)/2, y = (r.top + r.bottom)/2;         
        document.elementFromPoint(x, y) === element;       
        };   
    for (var i = 0, l = rects.length; i < l; i++) {     
        var r = rects[i],         
        in_viewport = r.top > 0 ? r.top <= height : (r.bottom > 0 && r.bottom <= height);     
        if (in_viewport && on_top(r)) return true;   }   
   return false; 
   } 
//######################################################################################//