var spotlightIm = {
    product: "Image Merger .EXE v2",
    spotlightImage: 'images/screenshots/im/spotlight.png',
    boxImage: "images/boxes/im_large.png",
    meta: [
            "Professional photo merging",
            ["Smooth","Transitions"],
            ["Photo", "Watermarking"],
            ["Image", "Bordering"],
            ["Enjoy the merging","experience!"]
          ],
    download: ["Visit Website", "Image Merger .EXE", cf.imVersion, cf.root + "/im/", true],
    link: cf.root + "/im/"

}

var spotlightBr = {
    product: "Batch Rename .EXE ",
    spotlightImage: 'images/screenshots/br/spotlight.png',
    boxImage: "images/boxes/br_large.png",
    meta: [
            "Take file renaming to the",
            ["      Next", "Level"],
            ["      Next", "Frontier"],
            ["      The", "Extreme"],
            ["Enjoy the file naming", "experience!"]
          ],
    download: ["Visit Website", "Batch Rename .EXE", cf.brVersion, cf.root + "/br/", true],
    link: cf.root + "/br/"

}

var spotlightIc = {
    product: "Image Converter .EXE",
    spotlightImage: 'images/screenshots/ic/spotlight.png',
    boxImage: "images/boxes/ic_large.png",
    meta: [
            "Your professional solution for",
            ["Photo", "Compression"],
            ["Effect", "Processing"],
            ["Thumbnail", "Creation"],
            ["Enjoy the conversion", "experience!"]
          ],
    download: ["Visit Website", "Image Converter .EXE", cf.icVersion, cf.root + "/ic/", true],
    link: cf.root + "/ic/"

}

var spotlightPv = {
    product: "Picture Viewer .EXE",
    spotlightImage: 'images/screenshots/pv/spotlight.png',
    boxImage: "images/boxes/pv_large.png",
    meta: [
            "Your photo solution for",
            ["Digital", "Photography"],
            ["Slideshow", "Presentations"],
            ["Photo", "Management"],
            ["Enjoy the photo viewing", "experience!"]
          ],
    download: ["Visit Website", "Picture Viewer .EXE", cf.pvVersion, cf.root + "/pv/", true],
    link: cf.root + "/pv/"

}

var mouseWatch = undefined;

var spotlight = {
    items: [],
    hostObject: undefined,
    hObj: undefined,
    showMultiple: true,
    curIndex: -1,
    curCount: 1,
    isPaused: false,
    timerObj: undefined,
    addItem: function (item) {
        this.items[this.items.length] = item
    },

    run: function (hostObj) {
        var hObj = $('<div>').attr("id", "SpotlightWindow").css("width", (this.items.length * 820) + "px").css("margin-left", "0px")

        $(hostObj).append(hObj)
        this.hObj = hObj
        this.hostObject = $(hObj)

        for (var i = 0; i < this.items.length; i++) {
            this.display(i)
        }


        $(hObj).append($('<div>').addClass("SpotlightClear"))
        this.hostObject = $(hostObj)
        if (this.showMultiple) this.displayBoxes()

        $(hostObj).mouseenter(function () { spotlight.pauseTimer(); }).mouseleave(function () { spotlight.resumeTimer() })
    },

    display: function (index) {
        if (this.items.length > index) {
            var hO = this.hostObject
            var it = this.items[index]

            var sobject = $('<div>').addClass("SpotlightObject")
            var left = $('<div>').addClass("SpotlightLeft")
            var right = $('<div>').addClass("SpotlightRight")
            var dEnd = $('<div>').addClass("SpotlightClear")
            var leftRight = $('<div>').addClass("SpotlightLeftRight")
            var leftLeft = $('<div>').addClass("SpotlightLeftLeft")
            var leftBottom = $('<div>').addClass("SpotlightLeftBottom")
            $('<div>').addClass("SpotlightTitle").text(it.product).appendTo(left)





            $('<div>').addClass("spotlightImage").html('<img src="' + cf.root + "/" + it.spotlightImage + '" />').appendTo(right)

            $('<div>').addClass("SpotlightMetaA").text(it.meta[0]).appendTo(leftRight)
            $('<div>').addClass("SpotlightMetaB").html('<span class="SpotlightCaption">' + it.meta[1][0] + '</span>' + '<span class="SpotlightCaptionAlt">' + it.meta[1][1] + '</span>').appendTo(leftRight)
            $('<div>').addClass("SpotlightMetaC").html('<span class="SpotlightCaption">' + it.meta[2][0] + '</span>' + '<span class="SpotlightCaptionAlt">' + it.meta[2][1] + '</span>').appendTo(leftRight)
            $('<div>').addClass("SpotlightMetaD").html('<span class="SpotlightCaption">' + it.meta[3][0] + '</span>' + '<span class="SpotlightCaptionAlt">' + it.meta[3][1] + '</span>').appendTo(leftRight)
            $('<div>').addClass("SpotlightMetaE").html('<span class="SpotlightSubCaption">' + it.meta[4][0] + '</span>' + ' <span class="SpotlightSubCaptionAlt">' + it.meta[4][1] + '</span>').appendTo(leftRight)

            leftRight.appendTo(left)

            var dA = $('<div>').addClass("downloadArea").html('<div class="SpotlightDownloadCaption"><a href="' + it.download[3] + '">' + it.download[0] + '</a></div>' + '<div class="SpotlightDownloadText">' + it.download[1] + ' ' + it.download[2] + '</div>').appendTo(leftBottom)

            if (it.download[4]) {
                dA.addClass("downloadArea_Visit")
            } else {
                dA.addClass("downloadArea_Download")
            }


            leftBottom.appendTo(left)

            left.css("background-image", "url('" + cf.root + '/' + it.boxImage + "')")

            //$('<div>').addClass("SpotlightDownloadImage").html('<img src="' + cf.root + "/" + it.download[3] + '" />').appendTo(leftLeft)
            //leftLeft.appendTo(left)




            sobject.append(left)
            sobject.append(right)
            sobject.append(dEnd)
            //sobject.css("margin-top", -(140 * index) + "px")
            //sobject.css("margin-left", -(140 * index) + "px")
            hO.append(sobject)

            if (it.link != '') {
                sobject.css("cursor", "pointer")
                sobject.click(function () {
                    document.location.href = it.link
                })
            } else {

                dA.click(function () {
                    document.location.href = it.download[3]
                })
            }

            dA.hover(function () {
                //dA.addClass("SpotlightDownloadHover")
                dA.find('a').css("color", "#F09102")
            }, function () {
                dA.find('a').css("color", "")
            })
            //'sobject.css("margin-left","800px")


        }
    },

    redrawTo: function (index) {
        for (var i = 0; i < this.items.length; i++) {
            $("#SpotlightPart" + i).removeClass("SpotlightPartSelected").text("")
        }
        this.curIndex = index
        this.curCount = 5
        $("#SpotlightPart" + index).addClass("SpotlightPartSelected")
        if (!this.isPaused) $("#SpotlightPart" + index).text(this.curCount.toString())

        this.hObj.animate({ marginLeft: -(820 * index) }, 700)
    },

    animateSlide: function () {

        this.curCount--
        if (this.curCount < 1) {
            this.curCount = 5
            this.curIndex++
            if (this.curIndex > this.items.length - 1) this.curIndex = 0
            this.redrawTo(this.curIndex)
        } else {
            $('.SpotlightPartSelected').text(this.curCount.toString())
        }

        if (this.showMultiple) { this.startTimer() }
    },

    startTimer: function () {
        if (this.timerObj) clearTimeout(this.timerObj)
        this.timerObj = setTimeout("spotlight.animateSlide()", 1000)
    },

    pauseTimer: function () {
        this.isPaused = true;
        $('.SpotlightPartSelected').text("")
        if (this.timerObj) clearTimeout(this.timerObj)
    },

    resumeTimer: function () {
        this.curCount = 6
        this.isPaused = false;
        if (this.timerObj) this.startTimer()
    },

    displayBoxes: function () {
        var hO = this.hostObject
        var parts = $('<div>').attr("id", "SpotlightParts")

        for (var i = 0; i < this.items.length; i++) {
            $('<div>').attr("id", "SpotlightPart" + i).attr("class", "SpotlightPart").attr("indexI", i).click(function () { spotlight.redrawTo($(this).attr("indexI")) }).mouseenter(
            function () {
                window.clearTimeout(mouseWatch)
                mouseWatch = setTimeout("spotlight.redrawTo(" + $(this).attr("indexI") + ")", 200)
            }).mouseleave(function() { window.clearTimeout(mouseWatch) }).appendTo(parts)
        }

        hO.append(parts)

    }
}