var sizesel = 150;
var siteindex = 30;
var sites = [];
var darksites = [];
var topsites = 1;
var loading = 0;
var loaded = 30;
var nomore = 0;

String.prototype.reverse = function(){
    splitext = this.split("");
    revertext = splitext.reverse();
    reversed = revertext.join("");
    return reversed;
}

$(document).ready(function() {
    //Actions here
    $("#itctbm_slider").slider({
            min: 150,
            max: 320,
            value: 150,
            slide: function(event, ui) {
                sizesel = ui.value;
                $(".itctbm_site").width(ui.value);
                $(".itctbm_site").height(  ui.value / 1.21);
                $(".itctbm_siteimage").width(ui.value);
            }
        });
    $(window).scroll(function () {
        if($(window).scrollTop() >= $(document).height() - $(window).height() - 40 ){
            if(loading != 1 && nomore == 0){
                loading = 1;
                $("#waiter").css("display", "block");
                $.post("/index/data", { shift: loaded},
                    function(data){
                        if(data.length < 30){
                            nomore = 1;
                        }
                        for(i in data){
                            sites.push({"site":data[i].Link, "rank": data[i].Rank, "image":data[i].Image}); 
                        }
                        LoadThumbs(siteindex, 30);
                        loaded+=data.length;
                        $("#waiter").css("display", "none");
                        loading = 0;
                }, "json");
            }
        }
    });
    
    //Load Fisrt
    //LoadThumbs(siteindex, 30);
}); 

function LoadThumbs(offset, number){
    siteindex = offset + number;
    if(topsites){
        if( sites.length <= siteindex){
            siteindex = sites.length ;
        }
        for(i=offset; i<siteindex; i++){
            var item = sites[i];
            $("#ictbm_sites_container").append("<div class='itctbm_site'><a rel='nofollow' href='http://www."+item.site+"'><div class='itctbm_siteimage'><img class='itctbm_siteimage_thumb' src='"+item.image+"' border='0'></div><div class='itctbm_desc'>"+(parseInt(i)+1)+". "+item.site+"<br> Alexa Rank #"+item.rank+"</div></a></div>");
        }
    }
    else{
        if( darksites.length <= siteindex){
            siteindex = darksites.length -1;
        }
        for(i=offset; i<siteindex; i++){
            var item = darksites[i];
            $("#ictbm_sites_container").append("<div rel='nofollow' class='itctbm_site'><div class='itctbm_siteimage'><img class='itctbm_siteimage_thumb' src='"+item.item+"' border='0'></div><div class='itctbm_desc'>"+item.site.reverse()+"<br> Alexa Rank #"+item.rank+"</div></div>");
        }
    }
    $(".itctbm_site").width(sizesel);
    $(".itctbm_site").height(  sizesel / 1.21);
    $(".itctbm_siteimage").width(sizesel);
}

function Dark(){
    $("#itctbm_top").html("<div class='ictbm_left'>The dark side of .me:</div> <div class='ictbm_right'><a href='javascript:Top();'>Top .me sites</a></div>");
    $("#ictbm_sites_container").html("");
    siteindex = 0;
    topsites = 0;
    LoadThumbs(siteindex, 30);
}

function Top(){
    $("#itctbm_top").html("<div class='ictbm_left'>Top .me sites: </div> <div class='ictbm_right'><a href='javascript:Dark();'>The dark side of .me</a></div>");
    $("#ictbm_sites_container").html("");
    siteindex = 0;
    topsites = 1;
    LoadThumbs(siteindex, 30);
}