/* WA PhotoBox
 * by: Kevin Southworth
 * Based on: Greybox and Galleria
 */
 
var PB_DONE = false;
var PB_HEIGHT = 400;
var PB_WIDTH = 400;
var PB_CENTERED = false;

function PB_thumbClick(elm)
{
    $('#pbMain').attr('src', $(elm).attr('src'));
    $('#waPhotoBox .thumbsContainer').children().removeClass('active');
    $(elm).addClass('active');
}

function PB_next()
{
    var $thumbsContainer = $('#waPhotoBox .thumbsContainer');
    var $nextThumb = $thumbsContainer.children('img.active').next();
    if($nextThumb.length == 0)
    {
        $nextThumb = $thumbsContainer.children('img').eq(0);
    }
    $thumbsContainer.children().removeClass('active');
    $nextThumb.addClass('active');
    
    var nextSrc = $nextThumb.attr('src');    
    $('#pbMain').attr('src', nextSrc);
}

function PB_prev()
{
    var $thumbsContainer = $('#waPhotoBox .thumbsContainer');
    var $prevThumb = $thumbsContainer.children('img.active').prev();
    if($prevThumb.length == 0)
    {
        $prevThumb = $thumbsContainer.children('img:last');
    }
    $thumbsContainer.children().removeClass('active');
    $prevThumb.addClass('active');
    
    var nextSrc = $prevThumb.attr('src');    
    $('#pbMain').attr('src', nextSrc);
}

function PB_show(photoUrlArray, width, height, isCentered, activePhoto)
{    
    PB_CENTERED = isCentered || false;
    PB_HEIGHT = height || 400;
    PB_WIDTH = width || 400;
    if(!PB_DONE) {
        $(document.body)
          .append("<div id='PB_overlay'></div> <div id='PB_window'><a class='modalClose' title='close' /></div>");        
        $("#PB_window a.modalClose").click(PB_hide);
        $("#PB_overlay").click(PB_hide);
        $(window).resize(PB_position);
        PB_DONE = true;
    }
    
    var activeIndex = 0;
    $(photoUrlArray).each(function(i) {        
        if(this.toString() == activePhoto)
        {
            activeIndex = i;
        }
    });

    $("#waPhotoBox").remove();    
    var $pbWindow = $("#PB_window");        
    var galleriaHtml = "<table id='waPhotoBox'>\
                                <tr>\
                                    <td class='mainImageContainer'>";
    galleriaHtml += "<img id='pbMain' src=\"" + photoUrlArray[activeIndex] + "\" onclick=\"PB_next();\" style=\"cursor: pointer;\" />";
    galleriaHtml += "               </td>\
                                </tr>\
                                <tr>\
                                    <td class='nav'>\
                                        <a href='#' onclick=\"PB_prev(); return false;\">&laquo; previous</a> &nbsp;&nbsp;&nbsp;&nbsp;\
                                        <a href='#' onclick=\"PB_next(); return false;\">next &raquo;</a>\
                                    </td>\
                                </tr>\
                                <tr>\
                                    <td class='thumbsContainer'>";                                        
    $(photoUrlArray).each(function(i) {
        var cssClass = "";
        if(i == activeIndex)
        {
            cssClass = "active";
        }
        var onclick = "PB_thumbClick(this); return false;";
        galleriaHtml += "<img class='pbThumb " + cssClass + "' src=\"" + this + "\" onclick=\"" + onclick + "\" />";
    });    
    galleriaHtml += "</td> </tr> </table>";
    
    $pbWindow.append(galleriaHtml);
    $pbWindow.bgiframe({ src: '#', top: 0, left: 0, height: PB_HEIGHT - 10, width: PB_WIDTH });
    
    $("#PB_overlay").show();
    PB_position();
    $pbWindow.show();
}

function PB_hide()
{    
    $("#PB_window,#PB_overlay").hide();
}

function PB_position()
{
    var de = document.documentElement;
    var w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
    var topPx = ($(window).scrollTop() + 30) + "px"; // account for user's scrollbar position   
    var leftPx = "260px";
    if(PB_CENTERED)
    {
        leftPx = ((w - PB_WIDTH) / 2) + "px";
    }
    //alert('top = ' + topPx + ', left = ' + leftPx);    
    $("#PB_window").css({ width: PB_WIDTH + "px", height: PB_HEIGHT + "px", left: leftPx, top: topPx });        
}