function getSet(type,mod,page,find,where){
	$(function(){
	    $.get("/mods/getSet.aspx", { type: type, mod: mod, find: find, page: page},
            function(data){
                if(where=='t'){
                    $('#thumbs').html(data);
                    loadInitialImage();
                }else if(where=='n'){
                    $('#nextThumbs').html(data);
                }else if(where=='p'){
                    $('#prevThumbs').html(data);
                }
                if(where=='t'){
	                page++;
	                getSet(type,mod,page,find,'n');
                }else if(where=='n'&&page!=2){
                    page=page-2;
                    getSet(type,mod,page,find,'p');
                }
            }
        );
    	
	    //Update the current Page being viewed
	    $('#currentPage').html(page);
	    $('#currentType').html(type);
	    $('#currentMod').html(mod);
	    $('#currentFind').html(find);
	});
}

function loadInitialImage(){
    $(function(){
        //Get the ID
        var id = $('#thumbs a').find('img:first').attr('id');

        //Set the opacity of current and next image divs
        $('#theImage').css({opacity: 0.0});
        $('#theImage').css('display','block');
        $('#theImageNext').css({opacity: 0.0});
        $('#theImageNext').css('display','block');
        $('#nextThumbs').css({opacity: 0.0});
        $('#prevThumbs').css({opacity: 0.0});
        
        //Put the image and details into the div
        $('#theImage').html($('#'+id+'image').html());
        $('#whoName').html($('#'+id+'bmoddername').html());
        $('#whoPhoto').html($('#'+id+'bmodderphoto').html());
        $('#moddetails').html($('#'+id+'mod').html());
        
        //Update the current ID being viewed
        $('#currentID').html("0");
        $('#'+id).addClass('current');
        
        var h = parseInt($('#theImage a').find('img').css('height'));
        var top = 400-h;
        if(h!=0){top=top/2};
        $("#theImageWrapper").css({"top": top});
        
        //display the first image
        $('#theImage').animate({opacity:1.0}, 500, function() {
           showdetails();
           setTimeout("hidedetails()",2000);
         });
        
        //Set the caption background to semi-transparent
	    $('#whosmodbar').css({opacity: 0.7});
	    $('#moddetailsbar').css({opacity: 0.7});

	    //Resize the width of the caption according to the image width
	    $('#whosmodbar').css({width: $('#theImage a').find('img').css('width')});
	    $('#moddetailsbar').css({width: $('#theImage a').find('img').css('width')});
	    $('#theImageWrapper').css({height: $('#theImage a').find('img').css('height')});
	    $('#theImageWrapper').css({width: $('#theImage a').find('img').css('width')});
	    $('#moddetailsbar').css("top", (parseInt($('#theImage a').find('img').css('height'))-40)+"px");
	    $('#whosmoddetails').css({width: $('#whosmodbar').css('width')});
    	
	    $("#theImage").mouseover(function(){
          showdetails();
        }).mouseout(function(){
          hidedetails();
        });
        
        //Watch for arrow key presses
        $(document).keypress(function(e) {
		    switch(e.keyCode) { 
			    // User pressed "up" arrow
			    case 37:
				    pI();
			    break;
			    // User pressed "down" arrow
			    case 39:
				    nI();
			    break;
		    }
	    });


    });
}

function showdetails(){
    $(function(){
        $('#whosmodbar').animate({opacity:0.7}, 300);
	    $('#whosmoddetails').animate({opacity:1.0}, 300);
	    $('#moddetailsbar').animate({opacity:0.7}, 300);
    });
}

function hidedetails(){
    $(function(){
        $('#whosmodbar').animate({opacity:0.0}, 300);
	    $('#whosmoddetails').animate({opacity:0.0}, 300);
	    $('#moddetailsbar').animate({opacity:0.0}, 300);
    });
}

function nI(){
   $(function(){
        var currentID = $('#currentID').html();
        if(currentID!=8){
            switchem('n');
        }else{
            aniNext();
        }
    }); 
}

function pI(){
   $(function(){
        var currentID = $('#currentID').html();
        if(currentID!=0){
            switchem('p');
        }else{
            aniPrev();
        }
    }); 
}

function aniNext(){
    $(function(){
        $('#thumbs').animate({"left":"-=450px",opacity:0.0},500);
        $('#nextThumbs').animate({"left":"-=425px",opacity:1.0},500,function(){nextSet()});
    });
}

function aniPrev(){
    $(function(){
        var page = $('#currentPage').html();
        if(page!=1){
            $('#thumbs').animate({"left":"+=450px",opacity:0.0},500);
            $('#prevThumbs').animate({"left":"+=410px",opacity:1.0},500,function(){previousSet()});
        }
    });
}

function nextSet(x){
    $(function(){
        //Swap the pages
        $('#prevThumbs').html($('#thumbs').html());
        $('#thumbs').html($('#nextThumbs').html());
        $('#thumbs').css({"left":"",opacity:""});
        $('#nextThumbs').css({"left":"",opacity:""});


        //Load the initial image
        switchem(0); 
        
        //Now load the next one
        var type = $('#currentType').html();
	    var mod = $('#currentMod').html();
	    var find = $('#currentFind').html();
        var page = $('#currentPage').html();
        
        //Increment the page to show what one we're looking at
        page++;
        $('#currentPage').html(page);
        
        
        //Get the next page of images                
        var nextPage = page+1;
	    
	    $.get("/mods/getSet.aspx", { type: type, mod: mod, find: find, page: nextPage},
            function(data){$('#nextThumbs').html(data);}
        );
    });
}

function previousSet(){
    $(function(){
        var type = $('#currentType').html();
        var mod = $('#currentMod').html();
        var find = $('#currentFind').html();
        var page = $('#currentPage').html();
        page--;
     
        //Swap the pages
        $('#nextThumbs').html($('#thumbs').html());
        $('#thumbs').html($('#prevThumbs').html());
        $('#thumbs').css({"left":"",opacity:""});
        $('#prevThumbs').css({"left":"",opacity:""});
        
        //Load the initial image
        switchem(8);
           
        //Update the current Page being viewed
        $('#currentPage').html(page);
        
        var prevPage = page-1;
        
        if(prevPage!=0){
	        $.get("/mods/getSet.aspx", { type: type, mod: mod, find: find, page: prevPage},
                function(data){$('#prevThumbs').html(data);}
            );
        }else{
            $('#prevThumbs').html('');
        }
    });
}

function switchem(indexID){
    $(function(){
        var id;
        //Remove from all
        $('#thumbs a').find('img').removeClass('current');
        
        if(indexID=='n'){
            indexID = $('#currentID').html();
            indexID++;
        }else if(indexID=='p'){
            indexID = $('#currentID').html();
            indexID--;
        }
        
        //Add to the selected one
        id = $('#thumbs a:eq('+indexID+')').find('img').attr('id');
        $('#'+id).addClass('current');
            
        //put in the next image
        $('#theImageNext').html($('#'+id+'image').html());
        $('#whoName').html($('#'+id+'bmoddername').html());
        $('#whoPhoto').html($('#'+id+'bmodderphoto').html());
        $('#moddetails').html($('#'+id+'mod').html());
        
        //Update the current ID being viewed
        $('#currentID').html(indexID);
    
        var imageHTML = $("#theImage").html();
        var imageHTMLNext = $("#theImageNext").html();
        $("#theImage").html(imageHTMLNext);
        $('#theImage').css({opacity: 0.0});
        $("#theImageNext").html(imageHTML);
        $('#theImageNext').css({opacity: 1.0});
        
        $('#whosmodbar').css({width: $('#theImage a').find('img').css('width')});
	    $('#moddetailsbar').css({width: $('#theImage a').find('img').css('width')});
	    $('#moddetailsbar').css("top", (parseInt($('#theImage a').find('img').css('height'))-30)+"px");
	    $('#whosmoddetails').css({width: $('#whosmodbar').css('width')});

        //Set the fade in effect for the next image, show class has higher z-index
        var h = parseInt($('#theImage a').find('img').css('height'));
        var top = 400-h;
        if(h!=0){top=top/2};

        $("#theImageWrapper").animate({"top": top, "height": $('#theImage a').find('img').css('height'), "width": $('#theImage a').find('img').css('width')},400);
        $("#theImage").animate({opacity:1.0}, 400);
        $("#theImageNext").animate({opacity:0.0}, 400);
    });
}