/* thumbnailNavFunctions.js - (c) Ty Norton 2009
 * Do not redistribute without express written consent from Ty Norton (tynorton AT gmail.com)
 * You must also include JQuery/JQuery Tools to make this work. 
 * i.e.
 * http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
 * http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js
 */

var slideShowButtonId = "slideshowButton";
var smallThumbClassSelector = ".smallFadingThumb";
var selectedThumbClass = "selectedThumb";
var whiteFadingDivSelector = "#whiteFadeHackDiv";
var mainImgTagSelector = ".mainImg";
var defaultOpacity = 0.5;
var mouseOverOpacity = 1.0;
var fadeSpeed = 300;
var thumbSize = 65; /* Also need to change this in gallery.aspx.cs */
var slideShowEnabled = false;

// Wait till document is ready
$(function () {
    // Fade in small thumbs on mouseover      
    $(smallThumbClassSelector).mouseover(
        function () {
            $(this).fadeTo(fadeSpeed, mouseOverOpacity);
        }
    );

    // Fade thumbs out on mouseout
    $(smallThumbClassSelector).mouseout(
        function () {
            if (!$(this).hasClass("selectedThumb")) {
                $(this).fadeTo(fadeSpeed, defaultOpacity);
            }
        }
    );

    // Fade thumbs out on mouseout
    $(smallThumbClassSelector).click(
        function () {
            $(smallThumbClassSelector).each(
                function () {
                    if ($(this).hasClass(selectedThumbClass)) {
                        $(this).removeClass(selectedThumbClass).fadeTo(fadeSpeed, defaultOpacity);
                    }
                }
            );
            $(this).fadeTo(fadeSpeed, 1).addClass("selectedThumb");
        }
    );

    $("div.scrollable").scrollable({
        vertical: true,
        globalNav: true,
        speed: 300,
        size: 5
    }).mousewheel();

    // Use visibility property to hide the larger image until we fade in the thumbnav later
    $(mainImgTagSelector).css('visibility','hidden');

    // Fix IE's JS 1.5 implimentation
    fixIEArray();

    setInterval("switchSlide()", 5000);
});

// When all images have loaded
$(window).load(function () {
    // Hack to fix thumbnail margins
    fixThumbnailMargins();

    // Fade out thumbs after load   
    $(smallThumbClassSelector).each(
        function () {
            $(this).fadeTo(600, defaultOpacity);
        }
    );

    // Place the white fading div on top of the loaded larger image
    var pos = getXY($(mainImgTagSelector).get(0));
    $(whiteFadingDivSelector).css("left", (pos.x - 50) + "px");
    $(whiteFadingDivSelector).css("top", (pos.y - $(mainImgTagSelector).height() - 10) + "px");
    $(whiteFadingDivSelector).css("width", ($(mainImgTagSelector).width() + 100) + "px");
    $(whiteFadingDivSelector).css("height", ($(mainImgTagSelector).height() + 20) + "px");
    $(whiteFadingDivSelector).fadeTo(0, 1); // Block out image with white div
    $(mainImgTagSelector).css('visibility', ''); // Unhide the image

    // once the image has been fully loaded on the client, *THEN* fade it in (if we're class="mainImg")
    $(mainImgTagSelector).load(
        function (evt) {
            // This white fading div hack is required because IE will turn true black pixels into
            // translucent ones when using "filter: alpha(opacity ...);" - (jQueryObj.FadeTo() does this)
            // This hack simply fades/positions a white div on top of the <img> tag to avoid
            // producing the bug.
            //$(evt.target).fadeTo(fadeSpeed, 1);
            var pos = getXY($(evt.target).get(0));
            $(whiteFadingDivSelector).css("left", (pos.x - 50) + "px");
            $(whiteFadingDivSelector).css("top", (pos.y - $(evt.target).height() - 10) + "px");
            $(whiteFadingDivSelector).css("width", ($(evt.target).width() + 100) + "px");
            $(whiteFadingDivSelector).css("height", ($(evt.target).height() + 20) + "px");
            $(whiteFadingDivSelector).fadeTo(fadeSpeed, 0);
        }
    );

    // Autoselect first thumbnail
    $(smallThumbClassSelector + ":first").addClass("selectedThumb").fadeTo(600, 1);

    // Lastly, fade in the larger image after we've faded in the selected thumbnail
    setTimeout("$(whiteFadingDivSelector).fadeTo(fadeSpeed, 0);", 600);
});

// I spent hours trying to figure out hwo to nicely vertically center the 
// thumbnails inside their containers to no avail. I hate that it has to 
// come to this JS hack, but the whole site requires JS, so this seems ok.
function fixThumbnailMargins() {
    $(smallThumbClassSelector).each(
        function () {
            var offset = thumbSize - this.height;
            var newTopMargin = offset / 2;

            if (this.height > 0) {
                this.style.marginTop = Math.round(newTopMargin) + "px";
            }
        }
    );
}

function selectImage(newUrl) {
    var img = document.getElementById(mainImgTagId);

    if (img) {
        $("#whiteFadeHackDiv").fadeTo(fadeSpeed, 1, function () {
            img.src = newUrl;
            selectedPhotoIndex = pictures.indexOf(newUrl);
        });
    }
}

function switchSlide() {
    if (slideShowEnabled) {
        selectedPhotoIndex++;
        if (selectedPhotoIndex >= pictures.length) {
            selectedPhotoIndex = 0;
        }

        // Simulate a click by raising the "click" event
        var nextImgThumbNode = $(smallThumbClassSelector).get(selectedPhotoIndex)
        fireClickEvent(nextImgThumbNode);
    }
}

function toggleSlideShow() {
    if (slideShowEnabled) {
        stopSlideShow();
    }
    else {
        startSlideShow();
    }
}

function stopSlideShow() {
    var button = document.getElementById(slideShowButtonId);
    slideShowEnabled = false;
    
    // Show play icon
    button.className = 'play playPausePosition';
}

function startSlideShow() {
    var button = document.getElementById(slideShowButtonId);
    slideShowEnabled = true;
    // Show pause icon
    button.className = 'pause playPausePosition';
}

// Fix IE's JS 1.5 implimentation
function fixIEArray() {
    if(!Array.indexOf){
        Array.prototype.indexOf = function(obj){
            for(var i=0; i<this.length; i++){
                if(this[i]==obj){
                    return i;
                }
            }
            return -1;
        }
    }
}

// Call onclick event in a browser non-specific way
function fireClickEvent(control)
{
    if (document.all)
    {
        control.fireEvent("onclick");
    }
    else
    {
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent("click", true, true);
        control.dispatchEvent(evt);
    }
}

function getXY(obj) {
    var curleft = 0;
    var curtop = obj.offsetHeight;
    var border;
    if (obj.offsetParent) {
        do {
            // XXX: If the element is position: relative we have to add borderWidth
            if (getStyle(obj, 'position') == 'relative') {
                if (border = _pub.getStyle(obj, 'border-top-width')) curtop += parseInt(border);
                if (border = _pub.getStyle(obj, 'border-left-width')) curleft += parseInt(border);
            }
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        }
        while (obj = obj.offsetParent)
    }
    else if (obj.x) {
        curleft += obj.x;
        curtop += obj.y;
    }
    return { 'x': curleft, 'y': curtop };
}

function getStyle(obj, styleProp) {
    if (obj.currentStyle)
        return obj.currentStyle[styleProp];
    else if (window.getComputedStyle)
        return document.defaultView.getComputedStyle(obj, null).getPropertyValue(styleProp);
}