﻿/************************************ Config ************************************/
var hoverDistance = 13;
var arrowWidth = 15;
var arrowHeight = 11;
var spacerSrc = '/maps/images/spacer.gif';
var arrowDownSrc = '/maps/images/galleryHoverArrowDown.png';
var arrowUpSrc = '/maps/images/galleryHoverArrowUp.png';
var hoverBGSrc = '/maps/images/gallery/hoverBG.gif';
var bigWidth = 521;
var bigHeight = 299;
var preloadLargeScreenshots = true;

/************************************ Preload Images ************************************/
var count = 0;

function preloadImage(src) {
    preloadImage.store[preloadImage.store.length] = new Image();
    preloadImage.store[preloadImage.store.length - 1].src = src;
}
preloadImage.store = [];

preloadImage(spacerSrc);
preloadImage(arrowDownSrc);
preloadImage(arrowUpSrc);
preloadImage(hoverBGSrc);
if (preloadLargeScreenshots) {
    $(document).load(function () {
        $('.client a img, .featuredSite a img').each(function () { preloadImage(this.src.replace('_sm', '_lrg')); });
    });
}
/************************************ Slider Code ************************************/
function prevClientPage(button) {
    $(button).parents('.industryWrapper').find('.clients').stop(true, true);
    $(button).parents('.industryWrapper').find('.currentIndicator').stop(true, true);
    var curPage = getCurrentPage($(button).parents('.industryWrapper'));
    var numPages = getPageCount($(button).parents('.industryWrapper'));
    if (curPage <= 1)
        return 0;
    showButtonsForState($(button).parents('.industryWrapper'), numPages,curPage-1);
    $(button).parents('.industryWrapper').find('.clients').animate({left: '+=651px'});
    $(button).parents('.industryWrapper').find('.currentIndicator').animate({left: '-=13px'});
}
function nextClientPage(button) {
    $(button).parents('.industryWrapper').find('.clients').stop(true, true);
    $(button).parents('.industryWrapper').find('.currentIndicator').stop(true, true);
    var curPage = getCurrentPage($(button).parents('.industryWrapper'));
    var numPages = getPageCount($(button).parents('.industryWrapper'));
    if (curPage >= numPages)
        return 0;
    showButtonsForState($(button).parents('.industryWrapper'), numPages, curPage+1);
    $(button).parents('.industryWrapper').find('.clients').animate({left: '-=651px'});
    $(button).parents('.industryWrapper').find('.currentIndicator').animate({left: '+=13px'});
}
function gotoClientPage(button) {
    var pageNum = $(button).parents('.industryWrapper').find('.clientPageNav a').index(button);
    showButtonsForState($(button).parents('.industryWrapper'), getPageCount($(button).parents('.industryWrapper')),
        pageNum+1);
    $(button).parents('.industryWrapper').find('.clients').animate({left: '-'+(651*pageNum)+'px'});
    $(button).parents('.industryWrapper').find('.currentIndicator').animate({left: (13*pageNum)+'px'});
}
function getCurrentPage(industry) {
    return (parseInt(industry.find('.clients').css('left'))/-651)+1;
}
function getPageCount(industry) {
    return Math.ceil(industry.find('.clients .client').length/3);
}
function showButtonsForState(industry, pageCount, currentPage, speed)
{
    if (typeof speed == "undefined") {
        speed = "normal";
    }
    if (currentPage >= pageCount) {
        industry.find('.nextButton a').fadeTo("normal", 0);
    } else {
        industry.find('.nextButton a').fadeTo("normal", 1);
    }
    if (currentPage <= 1) {
        industry.find('.prevButton a').fadeTo("normal", 0);
    } else {
        industry.find('.prevButton a').fadeTo("normal", 1);
    }
}
function initializeShowcaseSliders() {
    $('industryWrapper').each(intializeShowcaseSlider);
}
function initializeShowcaseSlider(industry) {
    var numPages = getPageCount(industry);
    if (numPages > 1) {
        industry.find('.industryHeader .panel-title-3').after('<div class="clientPageNav"><div class="currentIndicator">'+
            '</div></div>');
        industry.find('.clientPageNav').css('left', (industry.find('.panel-title-3').width()+5)+'px');
        for(var i = 0; i < numPages; i++){
            industry.find('.industryHeader .clientPageNav').append('<a href="#" onclick="gotoClientPage(this); '+
                'return false;"></a>');
        }
        industry.find('.industryHeader .clientPageNav').after('<div class="prevButton"><a href="#" '+
            'onclick="prevClientPage(this); return false;"></a></div>');
        industry.find('.industryHeader .clientPageNav').after('<div class="nextButton"><a href="#" '+
            'onclick="nextClientPage(this); return false;"></a></div>');
        showButtonsForState(industry, numPages, 1);
    }
}

/************************************ Mouseovers Code ************************************/
var browser = new BrowserDetect();

function setupMouseOvers() {
    createMouseHovers();
    $('.clients .client, .featuredSite').bind("mouseover", clientMouseOver);
    $('.clients .client, .featuredSite').bind("mouseout", clientMouseOut);
}
function createMouseHovers() {
    $('.industryWrapper, .featuredSite').each(function() {
        var galleryHover = $(document.createElement('div'));
        galleryHover.addClass('galleryHover');
        galleryHover.css({
            zIndex: 100,
            display: 'none',
            overflow: 'visible',
            position: 'absolute'
        });

        $('body').append(galleryHover);
        var galleryHoverArrow = $(document.createElement('div'));
        galleryHoverArrow.addClass('galleryHoverArrow');
        galleryHoverArrow.css({
            zIndex: 100,
            width: arrowWidth,
            height: arrowHeight,
            position: 'absolute',
            display: 'none'
        });
        var galleryHoverArrowImg = $(document.createElement('img'));
        galleryHoverArrowImg.css({
            width: arrowWidth,
            height: arrowHeight
        });
        galleryHoverArrowImg.attr('src', spacerSrc);
        galleryHoverArrow.append(galleryHoverArrowImg);

        var hoverOver = function() {
            var galleryHover = $(this);
            var galleryHoverArrow = $(this.galleryHoverArrow);
            if ($('#overlay').css("display") == 'none') {
                galleryHover.stop(true);
                galleryHoverArrow.stop(true);
                galleryHover.css('display', 'block').fadeTo(20, 1, function() { if (this.style && this.style.removeAttribute) { this.style.removeAttribute('filter'); } });
                galleryHoverArrow.css('display', 'block').fadeTo(20, 1);
            }
        }
        var hoverOut = function() {
            var galleryHover = $(this);
            var galleryHoverArrow = $(this.galleryHoverArrow);
            if ($('#overlay').css("display") == 'none') {
                galleryHover.fadeTo("normal", 0, function() { $(this).css('display', 'none') });
                galleryHoverArrow.fadeTo("normal", 0, function() { $(this).css('display', 'none') });
            }
        }
        galleryHover.bind('mouseenter', hoverOver);
        galleryHover.bind('mouseleave', hoverOut);

        galleryHover[0].galleryHoverArrow = galleryHoverArrow;
        galleryHover.galleryHoverArrow = galleryHoverArrow;
        this.galleryHover = galleryHover;
        $('body').append(galleryHover);
        $('body').append(galleryHoverArrow);
    });
}

function clientMouseOver() {
    var clients = $(this).parents('.clients');
    if (clients.length > 0 && clients.queue().length > 0) {
        return false;
    }

    var galleryHover;
    if ($(this).hasClass('featuredSite')) {
        galleryHover = $(this).attr('galleryHover');
    } else {
        galleryHover = $(this).parents('.industryWrapper').attr('galleryHover');
    }
    var galleryHoverArrow = galleryHover.galleryHoverArrow;
    var alreadyOpen = galleryHover.css('display') == 'block';
    galleryHover.find('div').remove();
    galleryHover.stop(true);
    galleryHover.css('display', 'block').fadeTo(20, 1, function() { if (this.style && this.style.removeAttribute) { this.style.removeAttribute('filter'); } })
    galleryHoverArrow.stop(true);
    galleryHoverArrow.css('display', 'block').fadeTo(20, 1); 
    
    // create container element
    var contentContainer = $(document.createElement('div'));
    contentContainer.addClass('clientContent');
    $(this).find('.clientTitle').clone().appendTo(contentContainer);
    $(this).find('.clientDescription').clone().appendTo(contentContainer);
    $(this).find('.clientLinks').clone().appendTo(contentContainer);
    $(this).find('.clientLogo').clone().appendTo(contentContainer);
    contentContainer.appendTo(galleryHover);
    
    // find placements for this thing.
    var scroll = getPageScroll();
    var size = getPageSize();
    
    var hoverTop;
    var arrowImg;
    var arrowTop;
    if ($(this).offset().top - scroll.y > contentContainer.outerHeight() + hoverDistance) { // above client
        hoverTop = $(this).offset().top - hoverDistance - galleryHover.outerHeight();
        galleryHover.css({
            background: "#FFF url('"+hoverBGSrc+"') no-repeat 50% 100%",
            borderBottomWidth: 0,
            borderTopWidth: 1
        });
        arrowImgIsUp = false;
        arrowTop = hoverTop + galleryHover.innerHeight();
    } else { // below client
        hoverTop = $(this).offset().top + hoverDistance + $(this).outerHeight();
        galleryHover.css({
            background: "#FFF url('"+hoverBGSrc+"') no-repeat 50% 0%",
            borderBottomWidth: 1,
            borderTopWidth: 0
        });
        arrowImgIsUp = true;
        arrowTop =  hoverTop - arrowHeight + 1;
    } 
    
    // position hover and hover arrow 
    galleryHover.css({
        top: hoverTop,
        left: $(this).offset().left + Math.floor(($(this).outerWidth()- galleryHover.outerWidth())/2)
    });
    setArrow(galleryHoverArrow.find('img'), arrowImgIsUp);
    galleryHoverArrow.css({
        top: arrowTop,
        left: parseInt($(galleryHover).css('left')) + Math.floor((galleryHover.outerWidth()- arrowWidth)/2)
    });
   
}
function clientMouseOut() {
    var galleryHover;
    if ($(this).hasClass('featuredSite')) {
        galleryHover = $(this).attr('galleryHover');
    } else {
        galleryHover = $(this).parents('.industryWrapper').attr('galleryHover');
    }
    var galleryHoverArrow = galleryHover.galleryHoverArrow;
    if ($('#overlay').css("display") == 'none')
    {
        galleryHover.fadeTo("normal", 0, function () { $(this).css('display', 'none') });
        galleryHoverArrow.fadeTo("normal", 0, function () { $(this).css('display', 'none') });
    }
}
function setArrow(arrowImg, arrowUp)
{
    var src;
    if (!arrowUp) {
        src = arrowDownSrc;
    } else {
        src = arrowUpSrc;
    }
    if (browser.isIE55to8) { // hack to get transparency to work. IE7 needs hack because it's png implementation is wonkey
        $(arrowImg).css({
            filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+src+"', sizingMethod='scale')"
        });
    } else { // assume png support
        $(arrowImg).attr('src', src);
    }
}
/************************************ Lightbox Code ************************************/
function setupOverlay() {
    var sizes = getPageSize();
    var scroll = getPageScroll();
    var overlay = document.createElement('div');
    overlay.setAttribute('id', 'overlay');
    $(overlay).css({
        position: 'absolute',
        top: 0,
        left: 0,
	    backgroundColor: '#000',
	    opacity: .8,
	    width: sizes.pageWidth,
	    height:	sizes.pageHeight,
	    display: 'none',
	    zIndex: '99'
    });
    $(overlay).click(hideOverlay);
    $('.client, .featuredSite').click( function () {
        var galleryHover;
        if ($(this).hasClass('featuredSite')) {
            galleryHover = $(this).attr('galleryHover');
        } else {
            galleryHover = $(this).parents('.industryWrapper').attr('galleryHover');
        }
        var galleryHoverArrow = galleryHover.galleryHoverArrow;
        var sizes = getPageSize();
        var scroll = getPageScroll();
        var smallImage = $(this).find('a img');
        var bigImage = smallImage.clone();
        
        showOverlay();
        
        bigImage.addClass('fullImage');
        bigImage.css({left: -9999});
        bigImage.attr('src', bigImage.attr('src').replace("_sm", "_lrg"));
        bigImage.click(hideOverlay);
        bigImage.appendTo($('body'));
        
        bigImage.css({
            position: 'absolute',
            width: smallImage.innerWidth(),
            height: smallImage.innerHeight(),
            left: smallImage.offset().left,
            top: smallImage.offset().top,
            zIndex: 100});
        bigImage.animate({
            left: scroll.x + Math.floor((sizes.windowWidth - bigWidth)/2),
            top: scroll.y + Math.floor((sizes.windowHeight + galleryHover.outerHeight() + hoverDistance - bigHeight)/2),
            height: bigHeight,
            width: bigWidth});
        // Switch to hover that goes above the image
        galleryHover.css({
            background: "#FFF url('"+hoverBGSrc+"') no-repeat 50% 100%"
        });
        galleryHoverArrow.css({
            top: parseInt(galleryHover.css('top')) + galleryHover.innerHeight()
        });
        setArrow(galleryHoverArrow.find('img'), false);
        // Animate the hover and arrow to their final position
        galleryHover.animate({
            left: scroll.x + Math.floor((sizes.windowWidth - parseInt(galleryHover.innerWidth()))/2),
            top: scroll.y + Math.floor((sizes.windowHeight - galleryHover.outerHeight() - hoverDistance - bigHeight)/2)
        });
        galleryHoverArrow.animate({
            left: scroll.x + Math.floor((sizes.windowWidth - arrowWidth)/2),
            top: scroll.y + Math.floor((sizes.windowHeight - galleryHover.outerHeight() - hoverDistance - bigHeight)/2) + galleryHover.innerHeight()
        });
        return false;
    });
    $('body').append(overlay);
}
function resizeOverlay() {
    var sizes = getPageSize();
    $('#overlay').css({
        width: sizes.pageWidth,
	    height:	sizes.pageHeight
    });
}
function showOverlay() {
    var overlay = $('#overlay');
    overlay.trigger('preShow');
    $('embed:not(.skipOverlay), object:not(.skipOverlay), select:not(.skipOverlay)').css({ visibility: 'hidden' });
    overlay.fadeIn("fast", function() { $('#overlay').trigger('show'); });
    return false;
}
function hideOverlay() {
    var overlay = $('#overlay');
    overlay.trigger('preHide');
    overlay.fadeOut("fast", function() {
        var overlay = $('#overlay');
        $('embed:not(.skipOverlay), object:not(.skipOverlay), select:not(.skipOverlay)').css({ visibility: 'visible' });
        overlay.css({ display: 'none' });
        overlay.trigger('hide');
    });
    $('.galleryHover').fadeTo("normal", 0, function () { $(this).css('display', 'none') });
    $('.galleryHoverArrow').fadeTo("normal", 0, function () { $(this).css('display', 'none') });
    $('.fullImage').fadeTo("normal", 0, function () { $(this).remove(); });
}

/************************************ Helper Code ************************************/
/**
 * getPageSize() by quirksmode.com
 *
 * @return Array Return an array with page width, height and window width, height
 */
function getPageSize() {
    var xScroll, yScroll;
    if (window.innerHeight && window.scrollMaxY) {	
	    xScroll = window.innerWidth + window.scrollMaxX;
	    yScroll = window.innerHeight + window.scrollMaxY;
    } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
	    xScroll = document.body.scrollWidth;
	    yScroll = document.body.scrollHeight;
    } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
	    xScroll = document.body.offsetWidth;
	    yScroll = document.body.offsetHeight;
    }
    var windowWidth, windowHeight;
    if (self.innerHeight) {	// all except Explorer
	    if(document.documentElement.clientWidth){
		    windowWidth = document.documentElement.clientWidth; 
	    } else {
		    windowWidth = self.innerWidth;
	    }
	    windowHeight = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
	    windowWidth = document.documentElement.clientWidth;
	    windowHeight = document.documentElement.clientHeight;
    } else if (document.body) { // other Explorers
	    windowWidth = document.body.clientWidth;
	    windowHeight = document.body.clientHeight;
    }	
    // for small pages with total height less then height of the viewport
    if(yScroll < windowHeight){
	    pageHeight = windowHeight;
    } else { 
	    pageHeight = yScroll;
    }
    // for small pages with total width less then width of the viewport
    if(xScroll < windowWidth){	
	    pageWidth = xScroll;		
    } else {
	    pageWidth = windowWidth;
    }
    return {pageWidth: pageWidth, pageHeight: pageHeight, windowWidth: windowWidth, windowHeight: windowHeight};
};
/**
 * getPageScroll() by quirksmode.com
 *
 * @return Array Return an array with x,y page scroll values.
 */
function getPageScroll() {
    var xScroll, yScroll;
    if (self.pageYOffset) {
	    yScroll = self.pageYOffset;
	    xScroll = self.pageXOffset;
    } else if (document.documentElement && document.documentElement.scrollTop) {	 // Explorer 6 Strict
	    yScroll = document.documentElement.scrollTop;
	    xScroll = document.documentElement.scrollLeft;
    } else if (document.body) {// all other Explorers
	    yScroll = document.body.scrollTop;
	    xScroll = document.body.scrollLeft;	
    }
    return {x: xScroll, y: yScroll};
};
// Based on Browser Detect  v2.1.6
// documentation: http://www.dithered.com/javascript/browser_detect/index.html
// license: http://creativecommons.org/licenses/by/1.0/
// original code by Chris Nott (chris[at]dithered[dot]com)
// Modified for ligher weight to detect only IE and Opera


function BrowserDetect() {
    var ua = navigator.userAgent.toLowerCase();

    this.isOpera = (ua.indexOf('opera') != -1);
    this.isIE = (ua.indexOf('msie') != -1 && !this.isOpera && (ua.indexOf('webtv') == -1));

    // browser version
    this.versionMinor = parseFloat(navigator.appVersion);

    if (this.isIE && this.versionMinor >= 4) {
        this.versionMinor = parseFloat(ua.substring(ua.indexOf('msie ') + 5));
    }
    else if (this.isOpera) {
        this.versionMinor = parseFloat(ua.substring(ua.indexOf('opera') + 6));
    }

    this.versionMajor = parseInt(this.versionMinor);

    // dom support
    this.isIE4x = (this.isIE && this.versionMajor == 4);
    this.isIE5x = (this.isIE && this.versionMajor == 5);
    this.isIE55 = (this.isIE && this.versionMinor == 5.5);
    this.isIE6x = (this.isIE && this.versionMajor == 6);
    this.isIE7x = (this.isIE && this.versionMajor == 7);
    this.isIE55to7 = (this.isIE && this.versionMajor >= 5.5 && this.versionMajor <= 7);
    this.isIE55to8 = (this.isIE && this.versionMajor >= 5.5 && this.versionMajor <= 8);
}
 
/************************************ Wireup Events ************************************/
$(document).ready(function () {
    setupOverlay();
    setupMouseOvers();
    $('.industryWrapper').each(function () {
        initializeShowcaseSlider($(this)); // activate all the sliders
    });
});
$(window).resize(function () {
    resizeOverlay();
});