function fixSafari() {
    if ($.browser.safari) {
        $('body').addClass('renderfix');
        setTimeout(function () {
            $('body').removeClass('renderfix');
        }, 0);
    }
}

function showIcons($icons, cat) {
    $icons.removeClass('selected').find('img').removeClass('ungrouped');
	$icons.removeClass('selected').removeClass('ungroupedBorder');
    //$icons.filter(':not(' + cat + ')').find('img').addClass('ungrouped');
	//$icons.filter(':not(' + cat + ')').addClass('ungroupedBorder');
}

function showIconsStaff($icons, cat) {
    $icons.removeClass('selected').find('img').removeClass('ungrouped');
	$icons.removeClass('ungroupedBorder');
    $icons.filter(':not(' + cat + ')').find('img').addClass('ungrouped');
	$icons.filter(':not(' + cat + ')').addClass('ungroupedBorder');
}

function iconsInit() {
    $('#imageWall img').each(function () {
        $(this).after('<img src="' + this.src.replace(/thumb/i, 'Standard') + '" class="zoom" />');
    });
    
    var $icons = $('#imageWall li').click(function () {
        var $el = $(this),
            // collect the class names cleanly as '.class1, .class2, .etc'
            cat = ('.' + $el.attr('class').replace(/\s*selected\s*/, '').split(' ').join(',.'));

        // dims the icons that don't match the class(es)
        showIcons($icons, cat);

        // handles a redraw bug in Safari overflows by triggering a reflow redraw
        fixSafari();

        // show this li to be selected
        $el.addClass('selected');

        // trigger the custom event to show the appropriate links as highlighted
        $el.trigger('iconSelected', [ cat ]);
    });
    
    $('#imageWall a').click(function (event) {
        var $el = $(this);
        
        // if the strong element is visible, thus the element is selected
        // and we have a real link, then allow it to click through
        
        if ($el.find('strong:visible').length && $el.attr('href') != 'javascript:void(0)') {
            return true;
        } else {
            // rather than return false, we preventDefault which allows the event
            // to bubble up through the DOM, but still cancels the browser's default
            // click action
            event.preventDefault();	
        }
		
    });
    
    return $icons;
}

function iconsInitStaff() {
    
    var $icons = $('#imageWall li').click(function () {
        var $el = $(this);
		
        // collect the class names cleanly as '.class1, .class2, .etc'
		var classes = $.trim($el.attr('class'));
        cats = '.' + classes.replace(/\s*selected\s*/, '').split(' ').join(',.');
		
	    showIconsStaff($icons, "blah");
		
        // handles a redraw bug in Safari overflows by triggering a reflow redraw
        fixSafari();

        // show this li to be selected
        $el.addClass('selected').find('img').removeClass('ungrouped');

        // trigger the custom event to show the appropriate links as highlighted
        $el.trigger('iconSelected', [ cats ]);
    });
    
    $('#imageWall a').click(function (event) {
        var $el = $(this);
        
        // if the strong element is visible, thus the element is selected
        // and we have a real link, then allow it to click through
        
        if ($el.find('strong:visible').length && $el.attr('href') != 'javascript:void(0)') {
            return true;
        } else {
            // rather than return false, we preventDefault which allows the event
            // to bubble up through the DOM, but still cancels the browser's default
            // click action
            event.preventDefault();	
        }
		
    });
    
    return $icons;
}


var onloads = {
    sectionClients : function () {  
        function filterServices(cat) {
            $services.removeClass('selected').filter(cat).addClass('selected');
        }
        
        var $icons = iconsInit();
        
        var $clients = $('#mainColumn2 li').each(function () {
            // note: we're working with this.firstChild because we want the textNode since 
            // it could also have a link in there too
            var text = $.trim(this.firstChild.nodeValue);
            
            var $link = $('<a href="javascript:void(0)">' + text + '</a>');
            $link.click(function () {
                var $client = $icons.find(':contains(' + text + ')').parents('li:first');
                //console.log($client);
                $client.trigger('click');
                return false;
            });

            // replaces the textNode with the link we just created and the associated click handler
            $(this.firstChild).replaceWith($link);
        });

        var $services = $('#mainColumn1 li').wrapInner('<a href="javascript:void(0)" />').find('a').click(function () {
            var cat = '.' + $(this).parent().attr('class');
            showIcons($icons, cat);
            filterServices(cat);

            // remove the
            $clients.removeClass('selected');

            // find the img on the #imageWall that don't have the .ungrouped class
            // navigate *up* to the parent node and then *down* to the strong element
            $icons.find('img:not(.ungrouped)').parent().find('strong').each(function () {
                // grab the text from the strong tag and trim the white space from it
                var text = $.trim($(this).text());
                
                // find the first a element that has our text, add selected to the parent element
                $clients.find('a:first:contains(' + text + ')').parent().addClass('selected');
            });
            
            // cancel the default click action
            return false;
        }).end(); // end resets the selector to the '#servicesList li' elements

        $icons.bind('iconSelected', function (event, cat) {
            var $el = $(this),
                text = $.trim($el.find('strong').text());
            
            filterServices(cat);
			$clients.removeClass('selected').find('a:first:contains(' + text + ')').parent().addClass('selected');
			
        });
        
        // Styling Features
        // find the li that *do* have a nested 'a' element and wrap it's contents in a div
        $('#imageWall li:has(> a)').find('a').wrapInner('<div />');
        
        // find all the lis that *don't* have a nested 'a' element, and wrap them in a 
        // a > div combo - purely for styling and JS click handlers.
        $icons.not(':has(> a)').wrapInner('<a href="javascript:void(0)"><div /></a>');
        
    },
    
    meetTheTeam : function () {
        function filterTeams(cats) {
			
            $employees.find('li').removeClass('selected');
            $teams.parent().removeClass('selected');

            cats = cats.replace(/\./g, '');
			cats = cats.split(",");
			
			$employees.hide();
			
			for (i in cats) {
            	$teams.filter('[hash=#' + cats[i] + ']').parent().addClass('selected');
            	$employees.filter('#' + cats[i]).show().next().show();
			}
        }
        
        var $icons = iconsInitStaff();
        
        var $employees = $('#mainColumn2 div.inner > *');
        $employees.find('> li').wrapInner('<a href="javascript:void(0)" />');

        var $teams = $('#mainColumn1 a').click(function () {
            filterTeams(this.hash.substr(1));
            showIconsStaff($icons, '.'+this.hash.substr(1));

            return false;
        });

        $employees.find('li').click(function () { 
											  
            $employees.find('li').removeClass('selected');
            var $el = $(this).addClass('selected');
            var $link = $icons.find(':contains(' + $.trim($el.text()) + ')').parents('li:first');
            $link.trigger('click');
        });
        
        
        $icons.bind('iconSelected', function (event, cat) {
            var $el = $(this),
                text = $.trim($el.find('strong').text());
            
            filterTeams(cat);
            $employees.find('li:contains(' + text + ')').addClass('selected');
        });
        
        // Styling only, find all the imageWall lis that don't have nested a elements
        // and wrap the contents of the li with a JS link
        $icons.not(':has(> a)').wrapInner('<span class="highlight"></span>');
    }
};

$(function () {
    var onloadID = document.body.id;
    if (typeof onloads[onloadID] == 'function') {
        onloads[onloadID].call();
    }
});