/*  requires jQuery 1.3+
 *  handles a variety of functions on the sample network pages
 */

var innerWidth = 668;
var numEvents = null;
var currentEvent = 0;
var animatingEvents = false;
var animatingTimer = null;
var timeForEachEvent = 15000;
var transitionTime = 800;
var currentDirection = 'right';

String.prototype.contains = function(value) {
    return this.indexOf(value) > -1;
}

$(document).ready(function() {
    // set up handlers on the collapse button:
    $('a.collapseBtn').click(function(e) {
        e.preventDefault();
        $(this).toggleClass('btnUp');
        var that = $(this);
        if (that.parent().find('div.content').css('display') == 'none') {
            that.parent().removeClass('collapsedNetworkBox');
            that.parent().find('div.content').slideDown('normal', function() {
                if (!that.parent().find('div.content div.controlPanel').hasClass('eventToggle') || numEvents > 1) {
                    that.parent().find('div.content div.controlPanel').show('fast');
                }
            });
        }
        else {
            if (that.parent().find('div.content div.controlPanel').length > 0) {
                that.parent().find('div.content div.controlPanel').hide('fast', function() {
                    that.parent().find('div.content').slideUp();
                });
            }
            else {
                that.parent().find('div.content').slideUp();
            }
        }
        that.parent().addClass('collapsedNetworkBox');
    });

    // collapse network news on page load
    $('span.foldDay:gt(2)').removeClass('down').addClass('up').parent().addClass('folded').find('ul.dayNews').hide();

    // handle network news collapses clicks
    $('span.foldDay').click(function() {
        $(this).toggleClass('down').toggleClass('up')
               .parent().toggleClass('folded')
               .find('ul.dayNews').slideToggle();
    });

    // wrap long network objectives:
    var mission = $('div.missionSummary');
    
    if (mission.height() > 49) { // make sure this in sync with the CSS file if it ever changes
        mission.addClass('mini');
        mission.after('<div class="missionToggle controlPanel"><a href="#" id="missionToggler">More</a></div>');
        // handle toggling of the network objective (a.k.a. mission):
        $('#missionToggler').click(function(e) {
            e.preventDefault();
            $('div.missionSummary').toggleClass('mini');
            var which = $(this).text().contains('More') ? 'Less':'More';
            $(this).text(''+which+'');
            if (which == 'Less'){
                $(this).parent().removeClass('down');
                $(this).parent().addClass('up');
            } else {
                $(this).parent().removeClass('up');
                $(this).parent().addClass('down');
            }
        });
    }
    // handle multiple network events in a side-scrolling manner
    // set up the divs so that animation can take place, but non-JS has a fallback:
    $('#eventContainer').css({'overflow': 'hidden', 'width': innerWidth+'px'});
    $('#eventWrapper').css({'width': 5 * innerWidth + 'px'});
    $('div.featuredEventBox').css({'float': 'left', 'width': innerWidth+'px'});
    
    // handle control clicks:
    $('div.controlPanel li a').click(function(e) {
        e.preventDefault();
        if ($(this).parent().hasClass('pause')) {
            toggleEventAnimation();
        }
        else {
            window.clearTimeout(animatingTimer);
            currentDirection = ($(this).parent().hasClass('next')) ? 'right':'left';
            animatingEvents = true;
            moveEvents();
            $('div.controlPanel li a').removeClass('active');
            if (currentDirection == 'right') {
                $('div.controlPanel li.next a').addClass('active');
            }
            else {
                $('div.controlPanel li.prev a').addClass('active');
            }
        }
    });
	
	// give users a fancybox when trying to join:
	$('a.mustJoin').fancybox({
		frameHeight: 220,
		frameWidth: 450
	});
    
    // kick off animation:
    getNumEvents();
    if (numEvents >= 2) {
        // clone the first element for seemless carousel style animation:
        $('div.featuredEventBox:last').after($('div.featuredEventBox:first').clone());
        $('div.controlPanel').show();
        startEventsAnimation();
    }
});

function moveEvents() {
    if (currentDirection == "left") {
        if (currentEvent == 0) {
            $('#eventWrapper').css({'left': -1 * (numEvents * innerWidth) + 'px'});
            currentEvent = numEvents;
        }
        else {
            currentEvent -= 1;
        }
    }
    else {
        if (currentEvent == numEvents) {
            // move the position back to the start:
            $('#eventWrapper').css({'left': '0px'});
            currentEvent = 1;
        }
        else {
            currentEvent += 1;
        }
    }
    
    var newLeft = -1 * currentEvent * innerWidth + 'px';
    $('#eventWrapper').animate({'left': newLeft},
                               {'duration': transitionTime,
                                'queue': false});
    if (animatingEvents) {
        animatingTimer = window.setTimeout(moveEvents, timeForEachEvent);
    }
}

function startEventsAnimation() {
    if (!animatingEvents) {
        animatingTimer = window.setTimeout(moveEvents, timeForEachEvent);
        animatingEvents = true;
        $('div.controlPanel li a').removeClass('active');
        if (currentDirection == 'right') {
            $('div.controlPanel li.next a').addClass('active');
        }
        else {
            $('div.controlPanel li.prev a').addClass('active');
        }
        
    }
}
function stopEventsAnimation() {
    if (animatingEvents) {
        window.clearTimeout(animatingTimer);
        animatingEvents = false;
        $('div.controlPanel li a').removeClass('active');
        $('div.controlPanel li.pause a').addClass('active');
    }   
}

function toggleEventAnimation() {
    if(animatingEvents) {
        stopEventsAnimation();
    }
    else {
        startEventsAnimation();
    }
}
function getNumEvents() {
    if (numEvents === null) {
        numEvents = $('div.featuredEventBox').length;
    }
}