var navScroller = $('#navScroller');
var navScrollItems = $('#navScrollItems');
var slideDiff = 150;
var galleryContent = $('#galleryContent');
var galleryContainer = $('#galleryContainer');
var imageFadeLeft = $('#imgFadeLeft');
var imageFull = $('#imgFullMain');
var imageFadeRight = $('#imgFadeRight');
var galleryItemHeading = $('#galleryItemHeading');
var galleryItemDescription = $('#galleryItemDescription');

function galleryStartUp() {
    //alert('starting gallery');
    navScroller = $('#navScroller');
    navScrollItems = $('#navScrollItems');
    slideDiff = 150;

    $('.arrowNavRight').click(function() {
        var currentLeftOffset = parseInt(navScrollItems.css('left'));
        if (isNaN(currentLeftOffset)) { currentLeftOffset = 0; }

        checkSlideNav(currentLeftOffset - slideDiff * 2);
    });

    $('.arrowNavLeft').click(function() {
        var currentLeftOffset = parseInt(navScrollItems.css('left'));
        if (isNaN(currentLeftOffset)) { currentLeftOffset = 0; }

        checkSlideNav(currentLeftOffset + slideDiff * 2);
    });

    galleryContent = $('#galleryContent');
    galleryContainer = $('#galleryContainer');
    imageFadeLeft = $('#imgFadeLeft');
    imageFull = $('#imgFullMain');
    imageFadeRight = $('#imgFadeRight');
    galleryItemHeading = $('#galleryItemHeading');
    galleryItemDescription = $('#galleryItemDescription');

    $('img.navItem').click(function() { loadRequestedThumb($(this)); });

    $('#galleryBtnPrevious').click(function() {

        var currentThumb = $('#' + _selectedThumbId);
        if (currentThumb.prev().attr('class') == 'navItem') {
            loadRequestedThumb(currentThumb.prev());
            //alert(currentThumb.previous().attr('id'));
        } //else { alert('skipping'); }
    });

    $('#galleryBtnNext').click(function() {
        var currentThumb = $('#' + _selectedThumbId);
        if (currentThumb.next().attr('class') == 'navItem') {
            loadRequestedThumb(currentThumb.next());
            //alert(currentThumb.next().attr('id'));
        } //else { alert('skipping'); }
    });

    $('#btnGalleryClose').click(function() {
        $('#workItemGalleryHolder').slideUp(1600);
    });

    //Set Scroll Options
    if (navScrollItems.children().length <= 1) {
        $('.arrowNavRight').css('display', 'none');
        $('.arrowNavLeft').css('display', 'none');
        $('#galleryBtnNext').css('display', 'none');
        $('#galleryBtnPrevious').css('display', 'none');
    }
    else if (navScrollItems.width() <= navScroller.width())
    { 
        $('.arrowNavRight').css('display', 'none');
        $('.arrowNavLeft').css('display', 'none');
    }
    else{
        $('.arrowNavRight').css('display', 'block');
        $('.arrowNavLeft').css('display', 'block');
        $('#galleryBtnNext').css('display', 'block');
        $('#galleryBtnPrevious').css('display', 'block');    
    }
}

function scrollToThumb(imgThumb) {
    var offsetLeft = 0;
    for (var i = 1; i <= navScrollItems.children().index(imgThumb); i++) {
        
        var itm = navScrollItems.children(':nth-child(' + i + ')');
        var fullItemWidth = GetRealWidth(itm); //parseInt(itm.width()) + parseInt(itm.css('margin-left')) + parseInt(itm.css('margin-right')) + parseInt(itm.css('padding-left')) + parseInt(itm.css('padding-right'));
        fullItemWidth += 4;
        offsetLeft -= fullItemWidth;
         
        //var itm = navScrollItems.children(':nth-child(' + i + ')');
        //offsetLeft -= parseInt(itm.width());  - parseInt(itm.css('margin-left')) - parseInt(itm.css('margin-right'));
         
    }
    var baseOffset = navScroller.width() - GetRealWidth(imgThumb);
    baseOffset = baseOffset / 2;
    
    checkSlideNav(offsetLeft + baseOffset);
}

function GetRealWidth(itm)
{
    return itm.width() + parseInt(itm.css('margin-left')) + parseInt(itm.css('margin-right')) + parseInt(itm.css('padding-left')) + parseInt(itm.css('padding-right'));
}

function checkSlideNav(slideToOffset) {

    var minSlide = navScrollItems.width() - (navScroller.width() - slideDiff);

    if (slideToOffset < -minSlide) {
        slideToOffset = -minSlide;
    } else if (slideToOffset > slideDiff) {
        slideToOffset = slideDiff;
    }
    navScrollItems.stop().animate({ "left": slideToOffset + "px" }, 800);


    if (slideToOffset == slideDiff) {
        $('.arrowNavRight').css('opacity', '1');
        $('.arrowNavLeft').css('opacity', '.5');

    } else if (slideToOffset == -minSlide) {
        $('.arrowNavRight').css('opacity', '.5');
        $('.arrowNavLeft').css('opacity', '1');
    }
    else {
        $('.arrowNavRight').css('opacity', '1');
        $('.arrowNavLeft').css('opacity', '1');
    }
}

function loadRequestedByIndex(idex) {
    idex++;
    var srcItem = navScrollItems.children(':nth-child(' + idex + ')');
    loadRequestedThumb(srcItem);
}

function loadRequestedThumbById(thumbId) {
    var thumb = $('#' + thumbId);
    loadRequestedThumb(thumb);
}

var _selectedThumbId;
function loadRequestedThumb(imgThumb) {
    _selectedThumbId = imgThumb.attr('id');
    var iHeight = imgThumb.attr('iHeight');
    var iWidth = imgThumb.attr('iWidth');
    var iUrl = imgThumb.attr('iUrl');

    galleryItemHeading.html(imgThumb.attr('iHead'));
    galleryItemDescription.html(imgThumb.attr('iDesc'));
     
    //faded left
    imageFadeLeft.attr('src', iUrl);
    imageFadeLeft.attr('height', iHeight);
    imageFadeLeft.attr('width', iWidth);
    //Image Maing
    imageFull.attr('src', iUrl);
    imageFull.attr('height', iHeight);
    imageFull.attr('width', iWidth);
    //faded right
    imageFadeRight.attr('src', iUrl);
    imageFadeRight.attr('height', iHeight);
    imageFadeRight.attr('width', iWidth);

    //galleryContent.width()
    var containerLeft = (galleryContent.width() - iWidth) / 2; //parseInt(imageFull.attr('width'))) / 2;
    containerLeft = containerLeft - parseInt(imageFadeLeft.css('margin-right'));
    containerLeft = iWidth - containerLeft+4;
    galleryContainer.css('left', -containerLeft + 'px');

    //Scroll Navbar to selected thumb
    scrollToThumb(imgThumb);

    var plcHolder = $('#' + imgThumb.attr('ytPlaceholderID'));
    plcHolder.html('');
    plcHolder.append(imgThumb.attr('iYTUrl'));
}