function Gallery(){
    //Gallery config
    var playlistUrl = "http://client.hyperspots.com/playlist.php?playlist=7,28";
    var maxImageBound = 212;
    var colMax = 4;
    var imageZoom = true;
    var localSearct = false;
    //Player config
    var previewUrl = "preview.html?pid=";

    document.write("<div id=\"gallery\"></div>");
    var gallery = document.getElementById("gallery");

    var panelDiv = document.createElement("div");
    var perPageDiv = document.createElement("div");
    var pagesDiv = document.createElement("div");
    var thumbnailsDiv = document.createElement("div");

    gallery.appendChild(panelDiv);
    gallery.appendChild(perPageDiv);
    gallery.appendChild(pagesDiv);
    gallery.appendChild(thumbnailsDiv);

    var searchInput = null;
    var sortSelect = null;
    var pageInput = null;
    var perPage = 8;
    var currentPage = 1;
    var totalPages = 1;
    var playList = null;
    var totalItems = 0;

    displayPanel();

    window.onload = function(){
        refresh();
    };

    function display(response){
        currentPage = response.currentPage;
        perPage = response.perPage;
        totalPages = response.totalPages;
        totalItems = totalPages * perPage;

        displayPerPage();
        displayPages();
        displayList(response.hypermovies);
        playList = response.hypermovies;
    }

    function displayPages(){
        pagesDiv.innerHTML = "";
        if(totalPages > 1){
            var pagesTable = document.createElement("table");
            pagesTable.className = "pages";
            var pagesTbody = document.createElement("tbody");
            var tr = document.createElement("tr");
            var leftTd = document.createElement("td");
            var leftButton = document.createElement("button");
            leftButton.className = "arrow";
            leftButton.onmouseup = function(){
                if(currentPage > 1){
                    currentPage--;
                    refresh();
                }
            }
            var leftImg = document.createElement("img");
            leftImg.src = "img/arrowLeft.gif";
            leftButton.appendChild(leftImg);
            leftTd.appendChild(leftButton);
            tr.appendChild(leftTd);

            var pageTd = document.createElement("td");
            pageTd.appendChild(document.createTextNode("Page"));
            tr.appendChild(pageTd);

            var inputTd = document.createElement("td");
            pageInput = document.createElement("input");
            pageInput.type = "text";
            pageInput.className = "current";
            pageInput.value = currentPage;
            pageInput.onkeypress = function(event){
                var code = window.event.keyCode ? window.event.keyCode : event.charCode;
                if(code == 13){
                    var page = pageInput.value;
                    if(page >= 1 && page <= totalPages){
                        currentPage = page;
                        refresh();
                    }
                }
            };
            inputTd.appendChild(pageInput);
            tr.appendChild(inputTd);

            var totalTd = document.createElement("td");
            totalTd.appendChild(document.createTextNode("of " + totalPages));
            tr.appendChild(totalTd);

            var rightTd = document.createElement("td");
            var rightButton = document.createElement("button");
            rightButton.className = "arrow";
            rightButton.onmouseup = function(){
                if(currentPage < totalPages){
                    currentPage++;
                    refresh();
                }
            }
            var rightImg = document.createElement("img");
            rightImg.src = "img/arrowRight.gif";
            rightButton.appendChild(rightImg);
            rightTd.appendChild(rightButton);
            tr.appendChild(rightTd);

            pagesTbody.appendChild(tr);
            pagesTable.appendChild(pagesTbody);
            pagesDiv.appendChild(pagesTable);
        }
    }
    function displayPerPage(){
        perPageDiv.innerHTML = "";
        var panelTable = document.createElement("table");
        panelTable.className = "panel";
        var panelTbody = document.createElement("tbody");

        var tr = document.createElement("tr");
        var perpageTd = document.createElement("td");

        for(var index = 8; totalItems > 8 && index < 65 && index <= totalItems; index *= 2){
            var perPageSpan = getPerPageUnit(index);

            perpageTd.appendChild(perPageSpan);
            if(index < 64 && index < totalItems){
                perpageTd.appendChild(document.createTextNode(" | "));
            }else{
                perpageTd.appendChild(document.createTextNode(" item per page"));
            }
        }

        tr.appendChild(perpageTd);

        panelTbody.appendChild(tr);
        panelTable.appendChild(panelTbody);
        perPageDiv.appendChild(panelTable);
    }

    function getPerPageUnit(number){
        var perPageSpan = document.createElement("span");
        if(perPage == number){
            perPageSpan.className = "select";
        }else{
            perPageSpan.className = "link";
            perPageSpan.onclick = function(){
                perPage = number;
                currentPage = 1;
                refresh();
            };
        }

        perPageSpan.appendChild(document.createTextNode(number));

        return perPageSpan;
    }

    function displayPanel(){
        var panelTable = document.createElement("table");
        panelTable.className = "panel";
        var panelTbody = document.createElement("tbody");

        var tr = document.createElement("tr");
        var searchTd = document.createElement("td");
        searchInput = document.createElement("input");
        searchInput.type = "text";
        searchInput.size = "50";
        searchInput.className = "search";
        searchInput.onkeypress = function(event){
            var code = window.event.keyCode ? window.event.keyCode : event.charCode;
            if(code == 13){
                if(localSearct){
                    search();
                }else{
                    refresh();
                }
            }
        };

        var searchButton = document.createElement("input");
        searchButton.type = "button";
        searchButton.value = "Search";
        searchButton.className = "submit";
        searchButton.onclick = function(){
            if(localSearct){
                search();
            }else{
                refresh();
            }
        };

        searchTd.appendChild(searchInput);
        searchTd.appendChild(searchButton);
        tr.appendChild(searchTd);

        var sortTd = document.createElement("td");
        sortTd.className = "left";

        var sortText = document.createTextNode("Dynamic Info Field");
        var sortBr = document.createElement("br");

        sortSelect = document.createElement("select");
        sortSelect.className = "sort";
        sortSelect.onchange = function(){
            alert("sort");
        };


        var someoneOption = document.createElement("option");
        someoneOption.value = "someone";
        var someoneText = document.createTextNode("Sort by:");
        someoneOption.appendChild(someoneText);

        sortSelect.appendChild(someoneOption);

        sortTd.appendChild(sortText);
        sortTd.appendChild(sortBr);
        sortTd.appendChild(sortSelect);
        tr.appendChild(sortTd);

        panelTbody.appendChild(tr);

        panelTable.appendChild(panelTbody);
        panelDiv.appendChild(panelTable);
    }
    function displayList(array){
        thumbnailsDiv.innerHTML = "";
        var total = array.length;
        var lines = Math.ceil(total / colMax);
		array = array.reverse();

        var listTable = document.createElement("table");
        listTable.className = "list";
        var listTbody = document.createElement("tbody");
        for(var lineIndex = 0; lineIndex < lines; lineIndex++){
            for(var rowIndex = 0; rowIndex < 2; rowIndex++){
                var thumbTr = document.createElement("tr");
                for(var colIndex = 0; colIndex < colMax; colIndex++){
                    var thumbTd = document.createElement("td");
                    var index = lineIndex * colMax + colIndex;
                    if(index < total){
                        if(rowIndex == 0){
                            var link = document.createElement("a");
                            link.href = previewUrl + array[index].id;
                            link.target = "_blank";

                            var img = document.createElement("img");
                            img.src = array[index].image;

                            var width = array[index].width;
                            var height = array[index].height;
                            if(imageZoom){
                                var factor = 1;
                                if(width > height){
                                    factor = maxImageBound / width;
                                    img.width = maxImageBound;
                                    img.height = height * factor;
                                }else{
                                    factor = maxImageBound / height;
                                    img.width = width * factor;
                                    img.height = maxImageBound;
                                }
                            }

                            link.appendChild(img);

                            thumbTd.appendChild(link);
                            thumbTd.className = "cell image";
                        }else{
                            thumbTd.className = "cell description";
                            thumbTd.innerHTML = "<b>" + array[index].title + "</b><br />" + array[index].description + "<br />";
                            var grabLink = document.createElement("a");
                            grabLink.href = "code.html?pid=" + array[index].id;
                            grabLink.target = "_blank";
                            grabLink.appendChild(document.createTextNode("grab embed code"));
                            thumbTd.appendChild(grabLink);
                        }
                    }else{
                        thumbTd.appendChild(document.createTextNode(" "));
                    }
                    thumbTr.appendChild(thumbTd);
                }
                listTbody.appendChild(thumbTr);
                listTable.appendChild(listTbody);
            }
        }
        thumbnailsDiv.appendChild(listTable);
    }
    function search(){
        var searchData = new Array();
        var searchText = searchInput.value.toLowerCase();
        if(searchText.length > 0){
            var searchIndex = 0;
            for(var index = 0; index < playList.length; index++){
                var current = playList[index];
                var title = current.title.toLowerCase();
                var description = current.description.toLowerCase();
                if(title.indexOf(searchText) > -1 ||
                    description.indexOf(searchText) > -1){
                    searchData[searchIndex++] = current;
                }
            }
        }else{
            searchData = playList;
        }
        displayList(searchData);
    }
    function refresh(){
        var link = playlistUrl + "&current=" + currentPage + "&perpage=" + perPage;
        if(searchInput.value.length > 0) link += "&search=" + searchInput.value;
        var json = new JSON(link, display);
        json.doGet();
    }
}