var showAbout = false;
var workIndex = -1;

var work = [
    {image:'evelyn.jpg', details:'Evelyn Nallen - recorder player, uses a bespoke flash/flex and php content management system to create an engaging showcase for her music.</br><a href="http://evelyn-nallen.com" target="_blank">visit site...</a>'},
    {image:'rg.jpg', details:'Respectable Groove <a href="http://respectablegroove.co.uk" target="_blank">visit site...</a>'},
    {image:'matt.jpg', details:'Matthew Sanderson is a sculptor based in Cambridge, UK <a href="http://sanderson-sculpture.com" target="_blank">visit site...</a>'},
    {image:'coin.jpg', details:'Learner\'s coin is an online catalogue of a Chinese coin collection <a href="http://learnerscoin.com" target="_blank">visit site...</a>'},
    {image:'bunyee.jpg', details:'Bunyee helps you to send gifts of money anywhere in the world. Design by <a href="http://www.lamchinyee.com" target="_blank">Lam Chin Yee</a> <a href="http://bunyee.com" target="_blank">visit site...</a>'},
    {image:'david.jpg', details:'David Gordon is a harpsichordist and composer in London <a href="http://davidmusicgordon.com" target="_blank">visit site...</a>'}
];

$(document).ready(function() {
    if($.browser.msie) {
        $('.about-details, .work-details').hide();
        if(parseInt($.browser.version) == 6) {
        	$('.gif').each(function(index) {
        		var src = $(this).attr('src');
        		$(this).attr({'src':'assets/gif' + src.substring(6,src.length-3) + 'gif'});
        	});
        }
    }
    else {
        $('.about-details, .work-details').fadeTo(0, 0);
    }
    $('.work-image').fadeTo(0, 0);
	$('.loader').hide();
	$('.about-button, .close-button').click(function() {
        if($.browser.msie) {
            if(showAbout) {
                $('.about-details').hide();
            }
            else {
                $('.about-details').show();
            }
        }
        else {
            $('.about-details').fadeTo(500, (showAbout) ? 0 : 1);
        }
		showAbout = !showAbout;
		return false;
	});
	$('.work-button').click(function() {
		$('html, body').animate({ 
			'scrollTop': $('#work-anchor').offset().top-50
		}, 800);
		return false;
	});
	$('.contact-button').click(function() {
		$('html, body').animate({ 
			'scrollTop': $('#contact-anchor').offset().top-50
		}, 800);
		return false;
	});
	$('.top-button a').click(function() {
		$('html, body').animate({scrollTop:0}, 850);
		return false;
	});
	
	var index;
	$('.work-heading div a').each(function(index) {
		$(this).click(function(){
			$('.selected').removeClass('selected');
			if(index == workIndex) {
				$('.loader').hide();
                if($.browser.msie) {
                    $('.work-details').hide();
                    $('.work-details p').html('');
                }
                else {
                    $('.work-details').fadeTo(500, 0, function() {
                        $('.work-details p').html('');
                    });
                }
				$('.work-image').fadeTo(500, 0, function() {
					$('.work-image img').attr({'src':''});
				});
				workIndex = -1;
				return false;
			}
			else if(workIndex == -1) {
				$('.loader').show();
                if($.browser.msie) {
                    $('.work-details p').html(work[index].details);
                    $('.work-details').show();
                }
                setImage(index);
			}
			else {
                if($.browser.msie) {
                    $('.work-details p').html(work[index].details);
                }
                else {
                    $('.work-details').fadeTo(500, 0);
                }
				$('.work-image').fadeTo(500, 0, function() {
					setImage(index);
				});
			}
			$(this).addClass('selected');
			workIndex = index;
			return false;
		});
	});
});

function setImage(index) {
    if(!$.browser.msie) {
        $('.work-details p').html(work[index].details);
    }
	$('.work-image img').attr({'src':'assets/work/' + work[index].image});
	$('.work-image img').load(function() {
		$(this).unbind('load', arguments.callee);
		if(workIndex != -1) {
			$('.work-image').fadeTo(500, 1);
            if(!$.browser.msie) {
                $('.work-details').fadeTo(500, 1);
            }
		}
	});
}