/*------------------BIRD SLIDESHOW CLICK-------------------*/
function BirdSlideshow(imagesArray, domain, cid, noPhotoURL) {
    this.imagesArray = imagesArray;
    this.domain = domain;
    this.cid = cid;
    this.wid = '';
    this.stripPos = 0;
    this.lastIndex = 0;
    this.noPhotoURL = noPhotoURL;
    this.locked = false;
}


//Sets up initial screen.
BirdSlideshow.prototype.setup = function() {




    //Store this reference to use in anonynous calls.
    var parent = this;

    //Create initial control structure. 
    this.createInitialStructure();

    if (this.imagesArray == null || this.imagesArray.length <= 0) {
        var divThumbnail = $("<div class='divThumbnail'></div>").appendTo(this.p("divFilmstrip"));
        var imgThumbnailEmpty = $("<img id='" + this.pid("imgThumbnailEmpty" + 0) + "' src='http://" + this.domain + "/skins/slideshow/no_thumbnail.jpg'/>").appendTo(divThumbnail);
        var emptyImage = $("<img id='" + parent.pid("imgEmpty") + "' src='http://" + parent.domain + "/skins/slideshow/no.jpg' />").appendTo(parent.p("divBirdImage"));
        emptyImage.click(function() { document.location.href = parent.noPhotoURL; });

        var p;
        for (p = 2; p < 5; p++) {
            divThumbnail = $("<div class='divThumbnail'></div>").appendTo(this.p("divFilmstrip"));
            imgThumbnailEmpty = $("<img src='http://" + this.domain + "/skins/slideshow/" + p + ".gif'/>").appendTo(divThumbnail);
        }

        return;
    }

    //Setup strip width.
    this.setupStrip();

    //Get number of strips (1 strip is lane with 4 images on it)
    var numOfStrips = this.getNumberOfStrips();

    //Setup initial left/right bar image.
    if (this.imagesArray.length > 4)
        $(this.p("imgRightBar")).attr("src", "/slideshow/images/right_active.png");
    else
        $(this.p("imgRightBar")).attr("src", "/slideshow/images/inactive.png");

    //Loop through all image slots.
    var i = 0;
    for (i = 0; i < (4 * numOfStrips); i++) {

        var divThumbnail = $("<div class='divThumbnail'></div>").appendTo(this.p("divFilmstrip"));
        if (this.imagesArray.length > i) {

            var imgThumbnail = $("<img id='" + this.pid("imgThumbnail" + i) + "' src='" + this.imagesArray[i][1] + "?x=51&y=64'/>").appendTo(divThumbnail);
            //imgThumbnail.attr("title", this.imagesArray[i][0]);
            imgThumbnail.attr("alt", "");
            var title = this.imagesArray[i][0];

            var isIphoneOrIPodOrAndroid = this.IsIPhoneOrIPod() || this.IsAndroid();

            if (!isIphoneOrIPodOrAndroid) {
                imgThumbnail.qtip(
                    {
                        content: title,
                        position: {
                            corner: {
                                target: 'topMiddle',
                                tooltip: 'bottomMiddle'
                            }
                        },
                        style: {
                            name: 'light',
                            tip: true, // Give it a speech bubble tip with automatic corner detection
                            fontWeight: 'normal',
                            fontSize: '8pt',
                            fontFamily: 'Arial, Verdana',
                            textAlign: 'center'
                        },
                        show:
                            {
                                effect: 'slide',
                                length: 10
                            },
                        hide:
                            {
                                effect: 'slide',
                                length: 10
                            }



                    });
            }
            imgThumbnail.data("index", i);

            imgThumbnail.click(
                                function() {
                                    parent.setCurrentImage($("#" + this.id).data("index"));

                                }
                            );

            var imgBird = $("<img id='" + this.pid("imgBird" + i) + "' src='" + this.imagesArray[i][1] + "?x=322&y=403' title=\"" + this.imagesArray[i][0] + "\"/>").appendTo(this.p("divBirdImage"));
            imgBird.hide();
        }
        else {
            var imgThumbnailEmpty = $("<img id='" + this.pid("imgThumbnailEmpty" + i) + "' src='http://" + this.domain + "/skins/slideshow/" + (i - parseInt(i / 4) * 4 + 1) + ".gif'/>").appendTo(divThumbnail);
            imgThumbnailEmpty.click(
                    function() {
                        if ($(parent.p("imgEmpty")).val() == null) {
                            var emptyImage = $("<img id='" + parent.pid("imgEmpty") + "' style='display: none;' src='http://" + parent.domain + "/skins/slideshow/no.jpg' />").appendTo(parent.p("divBirdImage"));
                            emptyImage.click(function() { document.location.href = parent.noPhotoURL; });
                        }
                        parent.setEmptyImage();
                    }
                 );

        }
    }

    this.setCurrentImage(0);

    $(this.p("imgLeftBar")).click(
            function() {
                parent.slideLeft();
            }
         );

    $(this.p("imgRightBar")).click(
            function() {
                parent.slideRight();
            }
         );

    var fmat = this.formatTitle;
    var imgs = this.imagesArray;
    $("#" + this.cid + "divMain").find(".divBirdImage img").click(function() {
        var str = $(this).attr("src");
        var img = $(this);
        $.fancybox(str.substring(0, str.length - 12), {
            'padding': 0,
            'transitionIn': 'none',
            'transitionOut': 'none',
            'type': 'image',
            'title': fmat(imgs[img.prevAll().length]), //"<div style=\"font-weight: bold;\">" + imgs[img.prevAll().length][0] + "</div><div>" + imgs[img.prevAll().length][2] + "</div>Copyright © <a href=\"" + imgs[img.prevAll().length][5] + "\">" + imgs[img.prevAll().length][3] + "</a>",
            'titlePosition': 'inside',
            'changeFade': 0
        });

    });



    $("#" + this.cid + "divMain").find(".divBirdLightbox").click(function() {
        var img = $(this).parent().find(".divBirdImage img:visible");
        var str = img.attr("src");
        $.fancybox(str.substring(0, str.length - 12), {
            'padding': 0,
            'transitionIn': 'none',
            'transitionOut': 'none',
            'type': 'image',
            'title': fmat(imgs[img.prevAll().length]), //"<div style=\"font-weight: bold;\">" + imgs[img.prevAll().length][0] + "</div><div>" + imgs[img.prevAll().length][2] + "</div>Copyright © <a href=\"" + imgs[img.prevAll().length][5] + "\">" + imgs[img.prevAll().length][3] + "</a>",
            'titlePosition': 'inside',
            'changeFade': 0
        });
    });


}

BirdSlideshow.prototype.formatTitle = function(item) {

    var ret = "";
    if (item) {
        var ret = "<div style=\"font-weight: bold;font-size: 10pt;\">" + item[0] + "</div><div style=\";font-size: 10pt;\">" + item[2] + "</div>";

        if (item[5] != "" & item[3] != "") {
            ret += "Copyright © <a href=\"" + item[5] + "\">" + item[3] + "</a>";
        }
        else if (item[3] != "") {
            ret += "Copyright © " + item[3];
        }
    }

    return ret;
}

//Setup width of strip.
BirdSlideshow.prototype.setupStrip = function() {
    var numOfStrips = this.getNumberOfStrips();
    //293 dimension of one strip.
    $(this.p("divFilmstrip")).css("width", (numOfStrips * 293) + "px");
}

//Calculate number of filmstrips. 4 images  = 1 strip and each image above 4 new strip.
BirdSlideshow.prototype.getNumberOfStrips = function() {
    var numberOfStrips = this.imagesArray.length / 4 > parseInt(this.imagesArray.length / 4) ? parseInt(this.imagesArray.length / 4) + 1 : parseInt(this.imagesArray.length / 4);
    return numberOfStrips;
}


BirdSlideshow.prototype.setCurrentImage = function(index) {

    if (this.locked)
        return;

    this.locked = true;

    var parent = this;

    if (this.lastIndex == -1)
        $(this.p("imgEmpty")).fadeOut('slow', function() { $(parent.p("imgBird" + index)).fadeIn('slow', function() { parent.locked = false; }); });
    else
        $(this.p("imgBird" + parent.lastIndex)).fadeOut('slow', function() { $(parent.p("imgBird" + index)).fadeIn('slow', function() { parent.locked = false; }); });



    if (this.imagesArray[index][3] != "")
        $(this.p("divBirdCreator")).html("Copyright © <a href=\"" + this.imagesArray[index][5] + "\">" + this.imagesArray[index][3] + "</a>");
    $(this.p("divBirdHeadline")).html(this.imagesArray[index][4]);
    $(this.p("divBirdTitle")).text(this.imagesArray[index][0]);
    $(this.p("divBirdDescription")).text(this.imagesArray[index][2]);
    $("#" + this.cid + "divBirdLightbox").show();
    this.lastIndex = index;


}

BirdSlideshow.prototype.setEmptyImage = function() {

    if (this.locked)
        return;

    if ($(this.p("imgEmpty")).is(":visible"))
        return;

    this.locked = true;

    var parent = this;
    $(this.p("imgBird" + parent.lastIndex)).fadeOut('slow', function() {
        $(parent.p("imgEmpty")).fadeIn('slow', function() {
            parent.locked = false;
        });
    });
    this.lastIndex = -1;

    $("#" + this.cid + "divBirdLightbox").hide();
    $(this.p("divBirdDescription")).text("");
}

BirdSlideshow.prototype.donothing = function() { var p = 1; }

BirdSlideshow.prototype.slideRight = function() {

    //No sliding if only one strip.
    var numOfStrips = this.getNumberOfStrips();
    if (numOfStrips == 1)
        return;

    var st = $(this.p("divFilmstrip"));
    if (this.stripPos < numOfStrips - 1) {

        this.stripPos++;
        st.animate(
                    {
                        //left: parseInt(st.css('left'),10) == 0 ? -st.outerWidth() / 2 : 0
                        left: (-st.outerWidth() / numOfStrips) * this.stripPos
                    }
                );




        if ((this.stripPos + 1) == numOfStrips) {
            $(this.p("imgRightBar")).attr("src", "/slideshow/images/inactive.png");
            $(this.p("imgLeftBar")).attr("src", "/slideshow/images/left_active.png");
        }
        else {
            $(this.p("imgRightBar")).attr("src", "/slideshow/images/right_active.png");
            $(this.p("imgLeftBar")).attr("src", "/slideshow/images/left_active.png");
        }
    }
}

BirdSlideshow.prototype.slideLeft = function() {
    var numOfStrips = this.getNumberOfStrips();
    if (numOfStrips == 1)
        return;

    var st = $(this.p("divFilmstrip"));
    if (this.stripPos > 0) {
        this.stripPos--;
        st.animate(
                    {
                        //left: parseInt(st.css('left'),10) == 0 ? -st.outerWidth() / 2 : 0
                        left: (-st.outerWidth() / numOfStrips) * this.stripPos
                    }
                );

        if (this.stripPos == 0) {
            $(this.p("imgLeftBar")).attr("src", "/slideshow/images/inactive.png");
            $(this.p("imgRightBar")).attr("src", "/slideshow/images/right_active.png");
        }
        else {
            $(this.p("imgLeftBar")).attr("src", "/slideshow/images/left_active.png");
            $(this.p("imgRightBar")).attr("src", "/slideshow/images/inactive.png");
        }
    }
}


//Create initial static elements.
BirdSlideshow.prototype.createInitialStructure = function() {
    //Get root div.
    var mainDiv = $(this.p("divMain")); //TODO: 

    //Upper content. Above filmstrip.
    var divTopContent = $("<div></div>").appendTo(this.p("divMain"));
    divTopContent.attr("id", this.pid("divTopContent"));

    var divBirdHeadline = $("<div></div>").appendTo(this.p("divTopContent"));
    divBirdHeadline.attr("id", this.pid("divBirdHeadline"));
    divBirdHeadline.attr("class", "divBirdHeadline");

    var divBirdCreator = $("<div></div>").appendTo(this.p("divTopContent"));
    divBirdCreator.attr("id", this.pid("divBirdCreator"));
    divBirdCreator.attr("class", "divBirdCreator");

    //
    var divBirdImage = $("<div></div>").appendTo(this.p("divTopContent"));
    divBirdImage.attr("id", this.pid("divBirdImage"));
    divBirdImage.attr("class", "divBirdImage");

    var divBirdLightbox = $("<div style=\"cursor: pointer\"><img src=\"/slideshow/images/zoom_in_24.png\" style=\"vertical-align: middle\" /> Click here to zoom image</div>").appendTo(this.p("divTopContent"));
    divBirdLightbox.attr("id", this.pid("divBirdLightbox"));
    divBirdLightbox.attr("class", "divBirdLightbox");

    var divBirdDescription = $("<div></div>").appendTo(this.p("divTopContent"));
    divBirdDescription.attr("id", this.pid("divBirdDescription"));
    divBirdDescription.attr("class", "divBirdDescription");

    var divBirdTitle = $("<div></div>").appendTo(this.p("divTopContent"));
    divBirdTitle.attr("id", this.pid("divBirdTitle"));
    divBirdTitle.attr("class", "divBirdTitle");

    //Bottom content. Incluing film strip and its nav.
    var divBottomContent = $("<div></div>").appendTo(this.p("divMain"));
    divBottomContent.attr("id", this.pid("divBottomContent"));

    var divLeftBar = $("<div></div>").appendTo(this.p("divBottomContent"));
    divLeftBar.attr("id", this.pid("divLeftBar"));
    divLeftBar.attr("class", "divLeftBar")

    var imgLeftBar = $("<img/>").appendTo(this.p("divLeftBar"));
    imgLeftBar.attr("src", "/slideshow/images/inactive.png");
    imgLeftBar.attr("id", this.pid("imgLeftBar"));

    var divFilmStripWrapper = $("<div></div>").appendTo(this.p("divBottomContent"));
    divFilmStripWrapper.attr("id", this.pid("divFilmStripWrapper"));
    divFilmStripWrapper.attr("class", "divFilmStripWrapper");

    var divFilmstrip = $("<div></div>").appendTo(this.p("divFilmStripWrapper"));
    divFilmstrip.attr("id", this.pid("divFilmstrip"));
    divFilmstrip.attr("class", "divFilmstrip")

    var divRightBar = $("<div></div>").appendTo(this.p("divBottomContent"));
    divRightBar.attr("id", this.pid("divRightBar"));

    var imgRightBar = $("<img/>").appendTo(this.p("divRightBar"));
    imgRightBar.attr("src", "/slideshow/images/inactive.png");
    imgRightBar.attr("id", this.pid("imgRightBar"));

}

//Prefixe id with # and cid.
BirdSlideshow.prototype.p = function(id) {
    return "#" + this.cid + id;
}

//Prefixe with id.
BirdSlideshow.prototype.pid = function(id) {
    return this.cid + id;
}

BirdSlideshow.prototype.IsIPhoneOrIPod = function() {

    if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
        return true;
    else
        return false;
}

BirdSlideshow.prototype.IsAndroid = function() {

    if (navigator.userAgent.match(/android/i))
        return true;
    else
        return false;
}


/*------------------------End------------------------------*/