var bgAnimHandle;
var bgPos1 = 0;
var bgPos2 = 0;
var maxPos = 1008;

$(document).ready(function() {	
	// set up hovers
	setHover('#btnJoin', 'button_join', true);
	setHover('#btnPlay', 'button_play', true);
	setHover('#btnBuy', 'button_buy');
	setHover('#btnGift', 'button_gift');
	setHover('#btnVoucher', 'button_voucher');
	setHover('#btnParents', 'button_parents');
	// italian hover id's
	setHover('#btnJoinIta', 'button_join_ita', true);
	setHover('#btnPlayIta', 'button_play_ita', true);
	setHover('#btnBuyIta', 'button_buy_ita');
	setHover('#btnGiftIta', 'button_gift_ita');
	setHover('#btnVoucherIta', 'button_voucher_ita');
	setHover('#btnParentsIta', 'button_parents_ita');
	
	//fade-ins and stuff
	var speed = 2000;
	$('#new').show("drop", { direction:"down" }, speed);

        $('#tw').show("drop", { direction: 'down'}, 4000, function() {
             $('#tw').qtip( {
                content: '<p>Come follow <a target="_blank" href="http://twitter.com/PocketvilleMayr">@PocketvilleMayr</a> on Twitter!</p>',
                position: {
                    corner: {
                        target: 'leftMiddle',
                        tooltip: 'rightMiddle'
                    }
                },
                style: {
                    background: '#FFFFD0',
                    color: '#822B6F',
                    width: 250,
                    padding: 10,
                    radius: 10,
                    tip: true,
                    border: {
                        width: 1,
                        radius: 2,
                        color: '#4D2265'
                    }
                },
                show: {
                    when: {
                        event: 'click'
                    }
                },
                hide: {
                    when: {
                        event: 'unfocus'
                    }
                }
             });
             $(this).effect('bounce', {times: 3, distance: 10}, 200);
             $('#tw').mouseenter(function() {
                this.src = '/img/tw_2.png';
             });
             $('#tw').mouseleave(function() {
                this.src = '/img/tw_1.png';
             });
        });
        
        $('#fb').show("drop", {direction: 'down'}, 3000, function() {
             $('#fb').qtip( {
                content: '<p>Be a fan of <a target="_blank" href="http://www.facebook.com/pages/Pocketville-Puppy-In-My-Pocket/137384801221">Pocketville</a>'
                        + ' on Facebook and get access to fan-only offers and goodies!</p>',
                position: {
                    corner: {
                        target: 'leftMiddle',
                        tooltip: 'rightMiddle'
                    }
                },
                style: {
                    background: '#FFFFD0',
                    color: '#822B6F',
                    width: 250,
                    padding: 10,
                    radius: 10,
                    tip: true,
                    border: {
                        width: 1,
                        radius: 2,
                        color: '#4D2265'
                    }
                },
                show: {
                    when: {
                        event: 'click'
                    }
                },
                hide: {
                    when: {
                        event: 'unfocus'
                    }
                }
             });
             $(this).effect('bounce', {times: 3, distance: 10}, 200);
             $('#fb').mouseenter(function() {
                this.src = '/img/fb_2.png';
             });
             $('#fb').mouseleave(function() {
                this.src = '/img/fb_1.png';
             });

        });


	// bounce the cloud backgrounds, then fade out
	for (i = 1; i < 10; i++) {
		var dist1 = (i % 2 == 0) ? '+=30' : '-=30';
		var dist2 = (i % 2 == 0) ? '-=20' : '+=20';
		$('#bg1').animate({top:dist1}, speed);
		$('#bg2').animate({top:dist2}, speed);
	}
	$('#bg1').fadeOut(speed * 2);
	$('#bg2').fadeOut(speed * 2);
});	

function setHover(id, imgName, useEffect) {
	$(id).mouseenter(function () {
		this.src = '/img/' + imgName + '2.png';
		
	});
        $(id).mouseleave(function () {
		this.src = '/img/' + imgName + '1.png';
		if(useEffect) $(this).effect('bounce', {}, 200);
        });
        if (useEffect) {
            $(id).click(function () {
		$(this).hide('explode', {}, 200);
            });
        }
}