/// <reference path="jquery-1.2.6-vsdoc.js" />
/// <reference path="jquery.jqURL.js" />
// JavaScript Document

function setupPopups() {

    var $cardRollover = $('#card-rollover');
    var $topLeft = $('#card-arrow-top-left');
    var $topRight = $('#card-arrow-top-right');
    var $bottomLeft = $('#card-arrow-bottom-left');
    var $bottomRight = $('#card-arrow-bottom-right');
    var $cardImage = $('#card-image');
	var $cardLink = $('.card-image-link');
	var $cardGrid = $('.card-grid');

    var zindex = 99999;

    $('a[rollover]').each(function() {
        $('<img>').attr('src', $(this).attr('rollover')).css({ position: 'absolute', left: '-99999px' }).appendTo($('body'));
    });

    $('.card-grid > ul > li > a').each(function(index) {
        $(this).mouseover(function(e) {
            if ($('img', $(this)).css('opacity') == 1) {
                $cardRollover.insertAfter(this);
                var coords = cardPlacement(index);
                var li = $(this).parent();
                li.css('z-index', zindex);
                zindex++;
                var left = coords[0] + 'px';
                var top = coords[1] + 'px';
                $cardRollover.css('left', left);
                $cardRollover.css('top', top);
                $cardImage.attr('src', $(this).attr('rollover'));
                $cardImage.attr('alt', $(this).attr('title'));
                $cardLink.attr('href', $(this).attr('href'));
                $cardLink.attr('title', $(this).attr('title'));
            }
            else {
                hideRollover();
            }
        });

    });
    //Redundant function from above to support tabbing
    //TODO: encapsulate these two better...
    $('.card-grid > ul > li > a').each(function(index) {
        $(this).focus(function(e) {
            if ($('img', $(this)).css('opacity') == 1) {
                $cardRollover.insertAfter(this);
                var coords = cardPlacement(index);
                var li = $(this).parent();
                li.css('z-index', zindex);
                zindex++;
                var left = coords[0] + 'px';
                var top = coords[1] + 'px';
                $cardRollover.css('left', left);
                $cardRollover.css('top', top);
                $cardImage.attr('src', $(this).attr('rollover'));
                $cardImage.attr('alt', $(this).attr('title'));
                $cardLink.attr('href', $(this).attr('href'));
                $cardLink.attr('title', $(this).attr('title'));
            }
            else {
                hideRollover();
            }
        });

    });

    $('.card-grid').mouseout(function(event) {
        if (event.target == this)
            hideRollover();
    });

    $('.right-col, .left-col').mouseover(function(event) {
        hideRollover();
    });

    function hideRollover() {
        $cardRollover.css('left', '-9999px');
    }
    
    function cardPlacement(index) {
        index++;
        var coords = new Array;
        var card = document.getElementById('card-rollover');
        card.className = '';
        $topLeft.css('display', 'none');
        $topRight.css('display', 'none');
        $bottomLeft.css('display', 'none');
        $bottomRight.css('display', 'none');

        if ((index > 0) && (index < 5)) {
            coords.push('55'); coords.push('68');
            $topLeft.css('display', 'block');
        }
        if ((index > 4) && (index < 10)) {
            coords.push('-195'); coords.push('78');
            $topRight.css('display', 'block');
        }
        if ((index > 9) && (index < 15)) {
            coords.push('55'); coords.push('68');
            $topLeft.css('display', 'block');
        }
        if ((index > 14) && (index < 19)) {
            coords.push('-195'); coords.push('78');
            $topRight.css('display', 'block');
        }
        if ((index > 18) && (index < 24)) {
            coords.push('63'); coords.push('-330');
            $bottomLeft.css('display', 'block');
        }
        if ((index > 23) && (index < 28)) {
            coords.push('-200'); coords.push('-330');
            $bottomRight.css('display', 'block');
        }
        if ((index > 27) && (index < 33)) {
            coords.push('63'); coords.push('-330');
            $bottomLeft.css('display', 'block');
        }
        if ((index > 32) && (index < 37)) {
            coords.push('-200'); coords.push('-330');
            $bottomRight.css('display', 'block');
        }
        if ((index > 36) && (index < 42)) {
            coords.push('63'); coords.push('-330');
            $bottomLeft.css('display', 'block');
        }
        if ((index > 41) && (index < 46)) {
            coords.push('-200'); coords.push('-330');
            $bottomRight.css('display', 'block');
        }
        else {
            coords.push('55'); coords.push('68');
            $cardRollover.addClass('top-left');
        }

        return coords;
    }
}

$(document).ready(function() {
    setupPopups();
    var allTags = getAllTags();

    // Handle card navigation.
    $('#ulIssueNavigation a').click(onCardNavigationClicked);

    var initialTag = $.jqURL.get('tag');
    if (initialTag && initialTag != "") fadeImagesByTag(initialTag);

    function getAllTags() {
        var $cards = $('img[@tag]');
        var tags = new Array();
        $cards.each(function() { if ($.inArray($(this).attr('tag'), tags) < 0) tags.push($(this).attr('tag')); });
        return tags;
    }

    function onCardNavigationClicked(event) {
        //$(event).cancelBubble();
        var $clicked = $(event.target);

        $('#ulIssueNavigation a').each(function() { $(this).attr('class', $(this).attr('class').replace('-on', '')) });
        $clicked.attr('class', $clicked.attr('class') + '-on');
        $('#card-rollover').appendTo($('body')).css('left', '-9999px');  // Move the rollover out of the grid before it gets overwritten by thumbsFormatter!

        var clickedTag = $clicked.parent().attr('tag') || "";
        fadeImagesByTag(clickedTag);
        return false;
    }

    function fadeImagesByTag(clickedTag) {
        if (clickedTag == "") {
            $('img[@tag]').fadeTo('fast', 1);
            //$('img[@tag]').show();
        }
        else {
            if ($.inArray(clickedTag, allTags) >= 0) {
                for (var i = 0; i < allTags.length; i++) {
                    var tag = allTags[i];
                    if (tag == clickedTag) {
                        $('img[@tag=' + tag + ']').fadeTo('fast', 1).unbind('click', squashClick);
                        //$('img[@tag=' + tag + ']').show(); //('fast', .3).click(squashClick);
                    }
                    else {
                        $('img[@tag=' + tag + ']').fadeTo('fast', .3).click(squashClick);
                        // Set tabindex = -1
                        //$('img[@tag=' + tag + ']').hide(); //('fast', .3).click(squashClick);
                        $('img[@tag=' + tag + ']').parent().attr('tabindex', '-1');
                    }
                }
            }
        }
    }

    function squashClick() {
        return false;
    }

});