OverPageBrowser.OverPageBrowser = function(){
    this.imageId = "OverPageBrowserImage"
    this.closeImageId = "OverPageBrowserClose"
    this.over = null
    this.arrowsBg = [];
    this.showImage = function(url, title){
        //window.scrollTo(0, 0)
        this.over = new jslt.OverPage()
        var overLay = this.over.getLayer(OverPageBrowser.config.opacity, {
            backgroundColor: OverPageBrowser.config.backgroundColor
        })
        overLay.onclick = function(){
            OverPageBrowser.instance.hide()
        }
        //document.getElementById(this.over.outenerLayerId).style.backgroundColor=OverPageBrowser.config.backgroundColor
        this.over.setCenter()
        if (url.indexOf(".flv") > -1) {
            this.createFlvPlayer(url, jslt.overPageInstance.layerId, "outerFLV", title)
            return
        }
        var imLoading = document.createElement("img")
        imLoading.id = "OverPageBrowserImLoading"
        imLoading.src = "/modules/layout/loading-100x100.gif";
        imLoading.onclick = function(){
            OverPageBrowser.instance.hide()
        }
        imLoading.style.cursor = "pointer"
        var bodyEl = new jslt.Element(document.body)
        var viewSize = bodyEl.getRequiredSize()
        imLoading.style.position = "absolute"
        imLoading.style.left = Math.round(viewSize[0] / 2) + "px"
        imLoading.style.top = Math.round(viewSize[1] / 2) + "px"
        overLay.appendChild(imLoading)
        var img = document.createElement("img")
        overLay.appendChild(img)
        if (OverPageBrowser.config.clickKill == true) {
            img.onclick = function(){
                OverPageBrowser.instance.hide()
            }
            img.style.cursor = "pointer"
        }
        OverPageBrowser.instance.createCloseBtn(overLay)
        img.style.position = "absolute"
        img.style.left = "-2000px"
        img.alt = title
        img.onload = function(){
            var imgSize = [this.width, this.height]
            var bodyEl = new jslt.Element(document.body)
            var viewSize = bodyEl.getRequiredSize()
            var divEl = new jslt.Element(jslt.overPageInstance.outenerLayerId)
            viewSize[1] = divEl.getViewHeight()
            var thisPosition = [parseInt((viewSize[0] - imgSize[0]) / 2), Math.max(0, parseInt((viewSize[1] - imgSize[1]) / 2))]
            this.style.left = thisPosition[0] + "px"
            this.style.top = thisPosition[1] + "px"
            OverPageBrowser.instance.positionCloseBtn(thisPosition, imgSize)
            //console.log(this.alt)
            if (this.alt != undefined && this.alt != "") {
                var titleEl = document.createElement("div")
                titleEl.className = "OPBTitle elAbsolute"
                this.parentNode.appendChild(titleEl)
                titleEl.innerHTML = '<span class="OPBTitleText">' + this.alt + '</span>'
                titleEl.style.left = (thisPosition[0]) + "px"
                titleEl.style.top = (thisPosition[1] + this.height + 2 * OverPageBrowser.config.borderWidth) + "px"
                titleEl.style.display = "block"
                titleEl.style.width = (this.width + 2 * OverPageBrowser.config.borderWidth) + "px"
            }
            document.getElementById("OverPageBrowserImLoading").style.display = "none"
            if (viewSize[1] < imgSize[1]) {
                window.onscroll = null
            }
        }
        img.src = url
        img.id = this.imageId
        img.style.border = "solid " + OverPageBrowser.config.borderColor + " " + OverPageBrowser.config.borderWidth + "px"

    }
    this.showGaleryImage = function(index, substitute, records, wg3Instance){
        var recordsToPass
        if (typeof(records) == "object") {
            OverPageBrowser.instance.storedRecords = records
            recordsToPass = "'stored'"
        }
        else
            if (records == undefined) {
                this.wg3Instance = wg3Instance || "instance"
                records = webgalery3[this.wg3Instance].images
            }
            else
                if (records == "stored") {
                    recordsToPass = "'stored'"
                    records = OverPageBrowser.instance.storedRecords
                }
        record = records[index]
        var presentationType = typeof(webgalery3.config.presentationType) != "undefined" && webgalery3.config.presentationType.length > 1 ? webgalery3.config.presentationType : "image"
        if (!substitute) {
            //window.scrollTo(0, 0)
            this.over = new jslt.OverPage()
            var overLay = this.over.getLayer(OverPageBrowser.config.opacity, {
                backgroundColor: OverPageBrowser.config.backgroundColor
            })
            //document.getElementById(this.over.outenerLayerId).style.backgroundColor=OverPageBrowser.config.backgroundColor
            this.over.setCenter()
            var tbody = document.createElement("tbody")
            var tr = document.createElement("tr");
            var td1 = document.createElement("td");
            td1.id = "WebGaleryBigScrollLeft"
            td1.rowSpan = 3
            tr.appendChild(td1)
            var tdHeader = document.createElement("td");
            tdHeader.id = "WebGaleryBigHeader"
            tr.appendChild(tdHeader)
            var td3 = document.createElement("td");
            td3.id = "WebGaleryBigScrollRight"
            td3.rowSpan = 3
            tr.appendChild(td3)
            tbody.appendChild(tr)
            tr = document.createElement("tr");
            var tdImage = document.createElement("td");
            tdImage.id = "Webgalery3BigImageTd"
            tr.appendChild(tdImage)
            tbody.appendChild(tr)
            tr = document.createElement("tr");
            var tdTitle = document.createElement("td");
            tdTitle.id = "tdTitleWebGaleryBigTitle"
            tr.appendChild(tdTitle)
            tbody.appendChild(tr)
            var table = document.createElement("table")
            table.id = "Webgalery3BigTable"
            table.appendChild(tbody)
            overLay.appendChild(table)
            var imLoading = document.createElement("img")
            imLoading.id = "loadingProgressImg"
            imLoading.src = "/modules/layout/loading-100x100.gif";
            tdImage.appendChild(imLoading)
            var bodyEl = new jslt.Element(document.body)
            var viewSize = bodyEl.getRequiredSize()
            table.style.position = "absolute"
            table.style.left = Math.round(viewSize[0] / 2) + "px"
            table.style.top = Math.round(viewSize[1] / 2) + "px"
            //console.log(presentationType)
            if (presentationType == "image") {
                OverPageBrowser.instance.createCloseBtn(overLay)
                var img = document.createElement("img")
                tdImage.appendChild(img)
                img.onclick = function(){
                    OverPageBrowser.instance.hide()
                }
                img.style.cursor = "pointer"
                img.onload = function(){
                    $("#loadingProgressImg").css("display", "none")
                    $(this).css("display", "block")
                    var savedTitle = $("#tdTitleWebGaleryBigTitle").html()
                    $("#tdTitleWebGaleryBigTitle").html("")
                    $("#tdTitleWebGaleryBigTitle").width($(this).width())
                    var tableSize = [$("#Webgalery3BigTable").width(), $("#Webgalery3BigTable").height()]
                    $("#tdTitleWebGaleryBigTitle").html(savedTitle)
                    var bodyEl = new jslt.Element(document.body)
                    var viewSize = bodyEl.getRequiredSize()
                    var divEl = new jslt.Element(jslt.overPageInstance.outenerLayerId)
                    viewSize[1] = divEl.getViewHeight()
                    var thisPosition = [parseInt((viewSize[0] - tableSize[0]) / 2), Math.max(0, parseInt((viewSize[1] - tableSize[1]) / 2))]
                    $("#Webgalery3BigTable").css("left", thisPosition[0] + "px")
                    $("#Webgalery3BigTable").css("top", thisPosition[1] + "px")
                    OverPageBrowser.instance.positionCloseBtn(thisPosition, tableSize)
                }
                img.id = this.imageId;
            }
            else
                if (presentationType == "movie") {
                }
        }
        else
            if (substitute) {
                if (presentationType == "image") {
                }
                else
                    if (presentationType == "movie") {

                    }
            }
        if (presentationType == "image") {
            document.getElementById(this.imageId).style.display = "none"
            document.getElementById(this.imageId).src = record[1];
        }
        else
            if (presentationType == "movie") {
                document.getElementById("Webgalery3BigTable").style.background = "none"
                document.getElementById("Webgalery3BigTable").style.borderBottom = "none"
                this.createFlvPlayer(record[1], "Webgalery3BigImageTd", "Webgalery3BigTable", record[2])
            }
        if (presentationType == "image") {
            $("#loadingProgressImg").css("display", "block")
        }
        var isPrevElement = index > 0
        if (isPrevElement) {
            //check: is link only image?
            var prevEl = records[index - 1]
            isPrevElement = prevEl[2].indexOf("config|") == -1
        }

        document.getElementById("WebGaleryBigScrollLeft").onclick = isPrevElement ? new Function("OverPageBrowser.instance.showGaleryImage(" + (index - 1) + ",true," + recordsToPass + ",'" + this.wg3Instance + "')") : null
        document.getElementById("WebGaleryBigScrollLeft").style.cursor = isPrevElement ? "pointer" : "default";
        if (this.arrowsBg.length == 0) {
            this.arrowsBg.push(document.getElementById("WebGaleryBigScrollLeft").style.backgroundImage)
            this.arrowsBg.push(document.getElementById("WebGaleryBigScrollRight").style.backgroundImage)
        }
        document.getElementById("WebGaleryBigScrollLeft").style.backgroundImage = index > 0 ? this.arrowsBg[0] : "none";
        document.getElementById("WebGaleryBigScrollRight").onclick = index < (records.length - 1) ? new Function("OverPageBrowser.instance.showGaleryImage(" + (index + 1) + ",true," + recordsToPass + ",'" + this.wg3Instance + "')") : null
        document.getElementById("WebGaleryBigScrollRight").style.cursor = index < (records.length - 1) ? "pointer" : "default";
        document.getElementById("WebGaleryBigScrollRight").style.backgroundImage = index < (records.length - 1) ? this.arrowsBg[1] : "none";
        if (records.length > 1) {
            $("#WebGaleryBigHeader").html((index + 1) + " / " + records.length)
        }
        if (presentationType == "image") {
            $("#tdTitleWebGaleryBigTitle").html(record[2])
        }

    }
    this.hide = function(){
        this.over.hide()
    }
    this.createFlvPlayer = function(movieURL, assignToId, centerId, title){
        document.getElementById('contentOverPageDiv').onclick = null
        var emb = new PluginEmbeder()
        emb.addAttribute("id", "flvPlayer")
        emb.addAttribute("width", OverPageBrowser.config.flvPlayer.size[0])
        emb.addAttribute("height", OverPageBrowser.config.flvPlayer.size[1])
        emb.addAttribute("file", OverPageBrowser.config.flvPlayer.src)
        emb.addAttribute("wmode", "transparent")
        emb.addVariable("isHTML", "true")
        emb.addVariable("movieURL", movieURL)
        emb.addVariable("title", title)
        emb.addVariable("knobXMaxMax", OverPageBrowser.config.flvPlayer.knobXMaxMax)
        emb.addVariable("progressLineWidthMax", OverPageBrowser.config.flvPlayer.progressLineWidthMax)
        var playerHTML = emb.getHTML()//emb.assignToElement(assignToId)
        if (centerId == "outerFLV") {
            playerHTML = "<div id='outerFLV' >" + playerHTML + "</div>"
        }
        document.getElementById(assignToId).innerHTML = playerHTML
        this.over.centerContent(document.getElementById(centerId), OverPageBrowser.config.flvPlayer.size)
    }
    this.createSwfPlayer = function(swfFile, size, paramsA, playerSize, attributesA){
        this.over = new jslt.OverPage()
        var overLay = this.over.getLayer(OverPageBrowser.config.opacity, {
            backgroundColor: OverPageBrowser.config.backgroundColor
        })
        this.over.setCenter()
        var emb = new PluginEmbeder()
        if (!playerSize) {
            playerSize = size
        }
        emb.addAttribute("width", playerSize[0])
        emb.addAttribute("height", playerSize[1])
        emb.addAttribute("file", swfFile)
        emb.addAttribute("wmode", "transparent")
        emb.addVariable("isHTML", "true")
		console.log(paramsA)
        if (paramsA) {
            for (var p in paramsA) {
                emb.addVariable(p, paramsA[p])
            }
        }
        for (var p in attributesA) {
            emb.addAttribute(p, attributesA[p])
        }
        if (!attributesA || !attributesA.id) {
            emb.addAttribute('id', 'swfPlayerObject')
        }
        var playerHTML = emb.getHTML()
        playerHTML = "<div id='outerSwfPlayer' class='elAbsolute'>" + playerHTML + "</div>"
        document.getElementById(jslt.overPageInstance.layerId).innerHTML = playerHTML
        this.over.centerContent(document.getElementById('outerSwfPlayer'), size)
    }
    /**
     * require jquery
     * @param {Object} url
     * @param {Object} size
     */
    this.loadDocument = function(url, size){
        this.over = new jslt.OverPage()
        var overLay = this.over.getLayer(OverPageBrowser.config.opacity, {
            backgroundColor: OverPageBrowser.config.backgroundColor
        })
        this.over.setCenter()
        var contentHTML = "<div id='outerOverDocument' class='elAbsolute' style='width:" + size[0] + "px;height:" + size[1] + "px'>loading...</div>"
        document.getElementById(jslt.overPageInstance.layerId).innerHTML = contentHTML
        this.over.centerContent(document.getElementById('outerOverDocument'), size)
        $.get(url, function(data){
            $('#outerOverDocument').html(data)
        });
    }
    /**
     * OverPageBrowser.instance.showHTML('',[500,400])
     * @param {Object} html
     * @param {Object} size
     */
    this.showHTML = function(html, size){
        this.over = new jslt.OverPage()
        var overLay = this.over.getLayer(OverPageBrowser.config.opacity, {
            backgroundColor: OverPageBrowser.config.backgroundColor
        })
        overLay.onclick = function(){
            OverPageBrowser.instance.hide()
        }
        OverPageBrowser.instance.createCloseBtn(overLay)
        this.over.setCenter()
        var contentHTML = "<div id='outerOverDocument' class='elAbsolute' style='width:" + size[0] + "px;height:" + size[1] + "px'>"
        contentHTML += html
        contentHTML += "</div>"
        document.getElementById(jslt.overPageInstance.layerId).innerHTML = contentHTML
        this.over.centerContent(document.getElementById('outerOverDocument'), size)
        document.getElementById('outerOverDocument').onclick = function(){
            return false
        }
    }
    //$('#vsFrame').contents().find('head').
    /**
     * Not work in IExplore
     * @param {Object} html
     * @param {Object} size
     * @param {Object} styles
     */
    this.showHTMLFrame = function(html, size, styles){
        this.over = new jslt.OverPage()
        var overLay = this.over.getLayer(OverPageBrowser.config.opacity, {
            backgroundColor: OverPageBrowser.config.backgroundColor
        })
        overLay.onclick = function(){
            OverPageBrowser.instance.hide()
        }
        OverPageBrowser.instance.createCloseBtn(overLay)
        this.over.setCenter()
        var src = 'javascript:'
        src += '<html><body>' + html + '</body></html>'
        var contentHTML = "<iframe id='outerOverDocument' src='" + src + "' class='elAbsolute' style='width:" + size[0] + "px;height:" + size[1] + "px'>"
        contentHTML += "</iframe>"
        document.getElementById(jslt.overPageInstance.layerId).innerHTML = contentHTML
        this.over.centerContent(document.getElementById('outerOverDocument'), size)

    }
    this.showFrame = function(src, size, title){
        this.over = new jslt.OverPage()
        var overLay = this.over.getLayer(OverPageBrowser.config.opacity, {
            backgroundColor: OverPageBrowser.config.backgroundColor
        })
        overLay.onclick = function(){
            OverPageBrowser.instance.hide()
        }
        OverPageBrowser.instance.createCloseBtn(overLay)
        this.over.setCenter()
        var contentHTML = "<div id='outerOverDocument' class='elAbsolute' style='width:" + size[0] + "px;height:" + size[1] + "px'>"
        contentHTML += "<iframe src='" + src + "' frameborder='0' class='elAbsolute' style='width:" + size[0] + "px;height:" + size[1] + "px'>"
        contentHTML += "</iframe>"
        contentHTML += "<div id='titleBar' class='elAbsolute' style='width:" + size[0] + "px'>"
        contentHTML += title
        contentHTML += "</div>"
        contentHTML += "</div>"
        document.getElementById(jslt.overPageInstance.layerId).innerHTML = contentHTML
        this.over.centerContent(document.getElementById('outerOverDocument'), size)

    }
    this.fixFlvMiniatures = function(){
        var a = document.getElementsByTagName("a")
        for (var i = 0; i < a.length; i++) {
            if (a[i].href.indexOf(".flv") > -1 && a[i].className.indexOf("flvAdd") == -1) {
                var curA = a[i];
                curA.className += " flvAdd"
                var im = document.createElement("img")
                im.src = OverPageBrowser.config.flvPlayImage
                curA.style.position = "relative"
                im.style.position = "absolute"
                im.style.left = "0px"
                im.style.cursor = "pointer"
                im.className = "moviePlayButton"
                curA.appendChild(im)

            }
        }
    }
    this.createCloseBtn = function(overLay){
        if (OverPageBrowser.config.closeImg.show) {
            var closeImg = document.createElement("img")
            closeImg.style.position = "absolute"
            closeImg.style.display = "none"
            closeImg.style.cursor = "pointer"
            closeImg.id = this.closeImageId
            closeImg.src = OverPageBrowser.config.closeImg.src
            closeImg.onclick = function(){
                OverPageBrowser.instance.hide()
            }
            overLay.appendChild(closeImg)
        }
    }
    this.positionCloseBtn = function(thisPosition, imgSize){
        if (OverPageBrowser.config.closeImg.show) {
            var close = document.getElementById(OverPageBrowser.instance.closeImageId)
            if (close) {
                close.style.display = "block"
                close.style.left = (thisPosition[0] + imgSize[0] - OverPageBrowser.config.closeImg.width - 2 * OverPageBrowser.config.borderWidth) + "px"
                close.style.top = (thisPosition[1] + 2 * OverPageBrowser.config.borderWidth) + "px"
            }
        }
    }
}
OverPageBrowser.instance = new OverPageBrowser.OverPageBrowser()