function refresh(id, perpage){
    perpage = typeof perpage == "undefined" ? 6 : perpage;
    var gallery = small("gallery").empty();
    small.json({
        'url': "http://client.hyperspots.com/playlist.php",
        'params': {
            'playlist': 22,
            'perpage': perpage,
            'current': id
        },
        'callback': function(response){
            if(typeof response != "underfined"){
                var pages = gallery.append("div").setClass("pages");
                if(perpage == 1000){
                    pages.append("b").css({
                        "cursor": "pointer"
                    }).text("View per Page").click(function(){
                        refresh(1);
                    });
                }else{
                    pages.append("b").css({
                        "cursor": "pointer"
                    }).text("View All").click(function(){
                        refresh(1, 1000);
                    });
                    pages.append("span").html(" | ");
                    pages.append("b").css({
                        "cursor": "pointer"
                    }).text("< Back").condition(response.currentPage > 1, function(){
                        small(this).click(function(){
                            var page = response.currentPage - 1;
                            refresh(page > 0 ? page : 1);
                        });
                    });
                    pages.append("span").html("&nbsp;|&nbsp;");
                    for(var index = 1; index <= response.totalPages; index++){
                        if(index == response.currentPage){
                            pages.append("b").css({
                                "cursor": "pointer"
                            }).text(index.toString());
                        }else{
                            pages.append("span").css({
                                "cursor": "pointer"
                            }).text(index.toString()).click(function(event){
                                refresh(event.attach.id);
                            },{
                                'id': index
                            });
                        }
                        if(index < response.totalPages){
                            pages.append("span").html(",&nbsp;");
                        }else{
                            pages.append("span").html("&nbsp;");
                        }
                    }
                    pages.append("span").html("&nbsp;|&nbsp;");
                    pages.append("b").css({
                        "cursor": "pointer"
                    }).text("Next >").condition(response.currentPage < response.totalPages, function(){
                        small(this).click(function(){
                            var page = response.currentPage + 1;
                            refresh(page < response.totalPages ? page : response.totalPages);
                        });
                    });
                }

                var counter = 0;
                var grid = gallery.append("table").append("tbody");
                var column = grid.append("tr");

                small.each(response.hypermovies, function(current){
                    var cell = column.append("td");
                    var table = cell.append("table").setClass("thumbnail").append("tbody");
                    var top = table.append("tr").setClass("top");
                    top.append("td").setClass("left");
                    top.append("td").setClass("center");
                    top.append("td").setClass("right");
                    var middle = table.append("tr").setClass("middle");
                    middle.append("td").setClass("left");
                    var content = middle.append("td").setClass("center");
                    middle.append("td").setClass("right");
                    var bottom = table.append("tr").setClass("bottom");
                    bottom.append("td").setClass("left");
                    bottom.append("td").setClass("center");
                    bottom.append("td").setClass("right");
                    var link = content.append("a").setAttr({
                        "href": "pages/preview.html#" + current.id,
                        "target": "_blank"
                    });
                    link.append("img").setAttr({
                        "src": current.image
                    });
                    link.append("div").setClass("name").text(current.title);
                    var embed = content.append("div").setClass("embed");
                    embed.text("Click image to preview, or");
                    embed.append("br");
                    embed.concat("grab the ");
                    embed.append("u").css({
                        "cursor": "pointer"
                    }).text("embed code").click(function(){
                        small.showDialog({
                            'title': "Embed code",
                            'content': small.create("textarea").setAttr({
                                "readonly": "true"
                            }).css({
                                'min-width': 365 + "px",
                                'max-width': 365 + "px",
                                'width': 365 + "px",
                                'min-height': 250 + "px",
                                'max-height': 250 + "px",
                                'height': 250 + "px"
                            }).text('<object id="click_player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="600" height="540"> <param name="movie" value="http://www.shopheist.com/images/image_player.swf" /> <param name="allowScriptAccess" value="always" /> <param name="wmode" value="transparent" /> <param name="allowFullScreen" value="true" /> <param name="flashvars" value="t1259777435310=&linkTo=http%3A%2F%2Fwww.shopheist.com%2Fpages%2Fpreview.html%23713&enableFullscreen=1&configURL=http%3A%2F%2Fclient.hyperspots.com%2Fconfig.php%3Ff%3D' + current.f + '&autoHide=0&volume=50&autoPlay=1&myClicksColor=000000&enableLink=1&enableEmbed=1&buffer=2&docked=1&myClicksAlpha=80&overlayAlpha=0&w=600&showMyClicks=1&overlayURL=&f=' + current.f + '&instructionalText=%3Cfont+color%3D%22%23ff6500%22+size%3D%2230%22%3E1%3C%2Ffont%3E%3Cbr%3E%3Cfont+color%3D%22%23656565%22+size%3D%2214%22%3EClick+on+the+outfit%3Cbr%3Eto+learn+more.%3C%2Ffont%3E%3Cbr%3E%3Cbr%3E%3Cfont+color%3D%22%23ff6500%22+size%3D%2230%22%3E2%3C%2Ffont%3E%3Cbr%3E%3Cfont+color%3D%22%23656565%22+size%3D%2214%22%3EYour+clicks+will+appear+here.%3C%2Ffont%3E%3Cbr%3E%3Cbr%3E%3Cfont+color%3D%22%23ff6500%22+size%3D%2230%22%3E3%3C%2Ffont%3E%3Cbr%3E%3Cfont+color%3D%22%23656565%22+size%3D%2214%22%3EClick+again+to+link+out+and+shop%21%3C%2Ffont%3E&loop=0&locked=1&h=540&enableSaveClicks=0&saveClicksUrl=http%3A%2F%2Fwhowhatwear.hyperspots.com%2Fsaveclicks&openWebPage=0&loginUrl=http%3A%2F%2Fwhowhatwear.hyperspots.com%2Findex.html&enableMyClicksButton=1" /> <embed type="application/x-shockwave-flash" src="http://www.shopheist.com/images/image_player.swf" width="600" height="540" id="click_player" name="click_player" allowScriptAccess="always" wmode="transparent" allowFullScreen="true" flashvars="t1259777435310=&linkTo=http%3A%2F%2Fwww.shopheist.com%2Fpages%2Fpreview.html%23713&enableFullscreen=1&configURL=http%3A%2F%2Fclient.hyperspots.com%2Fconfig.php%3Ff%3D' + current.f + '&autoHide=0&volume=50&autoPlay=1&myClicksColor=000000&enableLink=1&enableEmbed=1&buffer=2&docked=1&myClicksAlpha=80&overlayAlpha=0&w=600&showMyClicks=1&overlayURL=&f=' + current.f + '&instructionalText=%3Cfont%20color%3D%22%23cc0033%22%20size%3D%2230%22%3E1%3C%2Ffont%3E%3Cbr%3E%3Cfont%20color%3D%22%23000000%22%3EClick%20on%20the%20outfit%3Cbr%3Eto%20learn%20more.%3C%2Ffont%3E%3Cbr%3E%3Cbr%3E%3Cfont%20color%3D%22%23cc0033%22%20size%3D%2230%22%3E2%3C%2Ffont%3E%3Cbr%3E%3Cfont%20color%3D%22%23000000%22%3EYour%20clicks%20will%20appear%20here.%3C%2Ffont%3E%3Cbr%3E%3Cbr%3E%3Cfont%20color%3D%22%23cc0033%22%20size%3D%2230%22%3E3%3C%2Ffont%3E%3Cbr%3E%3Cfont%20color%3D%22%23000000%22%3EClick%20again%20to%20link%20out%20and%20shop!%3C%2Ffont%3E&loop=0&locked=1&h=540&enableSaveClicks=0&saveClicksUrl=http%3A%2F%2Fwhowhatwear.hyperspots.com%2Fsaveclicks&openWebPage=0&loginUrl=http%3A%2F%2Fwhowhatwear.hyperspots.com%2Findex.html&enableMyClicksButton=1" /> </object>'),
                            'closeOnEscape': true,
                            'width': 400,
                            'height': 300
                        });
                    });
                    embed.concat(" now.");
                    if(++counter == 3){
                        counter = 0;
                        column = grid.append("tr");
                    }
                });
            }
        }
    });
};