/*
* songs
*/
var songs = [
	{
		title: 'Alone',
		url: 'http://www.celinedion.com/celinedion/english/music.cgi?album_id=23&band=1&song_id=2'
	},
	{
		title: 'Because You Loved Me',
		url: 'http://www.celinedion.com/celinedion/english/music.cgi?album_id=25&band=1&song_id=8'
	},
	{
		title: 'Eyes On Me',
		url: 'http://www.celinedion.com/celinedion/english/music.cgi?album_id=23&band=1&song_id=3'
	},
	{
		title: 'I Drove All Night',
		url: 'http://www.celinedion.com/celinedion/english/music.cgi?album_id=25&band=2&song_id=9'
	},
	{
		title: 'I\'m Alive',
		url: 'http://www.celinedion.com/celinedion/english/music.cgi?album_id=25&band=2&song_id=8'
	},
	{
		title: 'I\'m Your Angel',
		url: 'http://www.celinedion.com/celinedion/english/music.cgi?album_id=25&band=2&song_id=4'
	},
	{
		title: 'It\'s All Coming Back To Me Now',
		url: 'http://www.celinedion.com/celinedion/english/music.cgi?album_id=25&band=1&song_id=10'
	},
	{
		title: 'Love Can Move Mountains',
		url: 'http://www.celinedion.com/celinedion/english/music.cgi?album_id=25&band=1&song_id=4'
	},
	{
		title: 'My Heart Will Go On',
		url: 'http://www.celinedion.com/celinedion/english/music.cgi?album_id=25&band=2&song_id=1'
	},
	{
		title: 'My Love',
		url: 'http://www.celinedion.com/celinedion/english/music.cgi?album_id=25&band=1&song_id=5'
	},
	{
		title: 'Pour Que Tu M\'aimes Encore',
		url: 'http://www.celinedion.com/celinedion/english/music.cgi?album_id=25&band=1&song_id=12'
	},
	{
		title: 'River Deep, Mountain High',
		url: 'http://www.celinedion.com/celinedion/english/music.cgi?album_id=25&band=2&song_id=3'
	},
	{
		title: 'Taking Chances',
		url: 'http://www.celinedion.com/celinedion/english/music.cgi?album_id=25&band=2&song_id=10'
	},
	{
		title: 'The Power Of Love',
		url: 'http://www.celinedion.com/celinedion/english/music.cgi?album_id=25&band=1&song_id=6'
	},
	{
		title: 'The Prayer',
		url: 'http://www.celinedion.com/celinedion/english/music.cgi?album_id=25&band=2&song_id=5'
	}
];

/*
* standard facebook connect logged out callback
*/
var userLoggedOutCallback = function () {
	// track facebook connect state chage
	sCode.trackOutboundClick('http://api.connect.facebook.com/session_state.php', 'facebookconnect_logout_button');  

	$('#column-right #user-info span.name').text('User Name');
	$('#column-right #user-info img.pic_square').attr('src', 'images/pic_square.gif');
	$('a.facebook-logout-button').css('display', 'none');
	$('div.facebook-login-button').css('display', 'block');
	$('#column-right #user-info img.pic_square, #column-right #user-info span.name').css('display', 'none');
	$('#column-right #disabled-overlay div.content-overlay').html('');
	$('#disabled-overlay').css('display', 'block');
	
	$('#column-right ol.steps li.friend-selector img.pic_square').attr('src', 'images/pic_square.gif');
	$('#column-right ol.steps li.friend-selector select.friend-name').html('');
	$('#column-right ol.steps li.friend-selector select.friend-name').parents('.jquery-selectbox').unselectbox();
	$('#column-right ol.steps li.friend-selector select.friend-name').selectbox({width: 275});
};

/*
* standard facebook connect logged in callback
*/
var userLoggedInCallback = function (cached) {
	// verify that its not a cached login
	if (!cached) {
		// track facebook connect state chage
		sCode.trackOutboundClick('http://api.connect.facebook.com/session_state.php', 'facebookconnect_login_button');  
	}
	
	$('#column-right #user-info span.name').text($.cookie('name'));
	$('#column-right #user-info img.pic_square').attr('src', $.cookie('pic_square'));
	$('a.facebook-logout-button').css('display', 'block');
	$('div.facebook-login-button').css('display', 'none');
	$('#column-right #user-info img.pic_square, #column-right #user-info span.name').css('display', 'block');
	showFriends();
};

/*
*	build friend list and selector
*/
var showFriends = function () {
	$('#column-right #disabled-overlay div.content-overlay').html('<div class="loading">loading...</div>');
	$('#disabled-overlay').css('display', 'block');

	FB_RequireFeatures(['Api', 'Connect', 'XFBML', 'Base', 'Common'], function(){
		FB.Facebook.apiClient.fql_query('SELECT uid, pic_square, name FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1=' + $.cookie('userid') + ') ORDER BY name ASC', 
			function(result, exception) {
				if (exception != null) return;
				
				var firstUserID;
				var html = '';
				
				
				// build friends and html
				for (var i = 0, len = result.length; i < len; i++) {
					// filter out bad data... thanks facebook...
					if (result[i].name != null) {
						// set the first userid in the object
						if (typeof firstUserID == 'undefined') firstUserID = result[i].uid;
						
						friendInfo[result[i].uid] = {
							uid: result[i].uid,
							name: result[i].name,
							pic_square: result[i].pic_square != null ? result[i].pic_square : 'images/pic_square.gif'
						};
						
						html += '<option value="' + friendInfo[result[i].uid].uid + '" pic_square="' + friendInfo[result[i].uid].pic_square + '">' + friendInfo[result[i].uid].name + '</option>';
					}
				}
				
				// update select
				$('#column-right ol.steps li.friend-selector img.pic_square').attr('src', friendInfo[firstUserID].pic_square);
				$('#column-right ol.steps li.friend-selector select.friend-name').html(html);
				$('#column-right ol.steps li.friend-selector select.friend-name').parents('.jquery-selectbox').unselectbox();
				$('#column-right ol.steps li.friend-selector select.friend-name').selectbox({width: 275});
				
				// bind change
				$('#column-right ol.steps li.friend-selector select.friend-name').bind('change', function () {
					var friend = friendInfo[$(this).val()];
					$('#column-right ol.steps li.friend-selector img.pic_square').attr('src', friend.pic_square);
				});
				
				// hide overlay and loading image
				$('#column-right #disabled-overlay div.content-overlay').html('');
				$('#disabled-overlay').css('display', 'none');
			}
		);
	});
};

/*
*	post to friends wall 
*/
var postToFriendsWall = function () {
	var selectedSong = $('#column-right ol.steps li.song-selector select.song-name').val();
	var selectedFriend = friendInfo[$('#column-right ol.steps li.friend-selector select.friend-name').val()];
	var selectedImage = $('#column-right ol.steps li.image-selector ul.images').attr('selectedimage');
	var link = 'http://www.thehotticket.net/celinedion/dedicate/song.php?songID=' + selectedSong + '&userName=' + escape($.cookie('name')) + '&friendName=' + escape(selectedFriend.name);
	
	if (selectedSong.length == 0) {
		alert('please select a song');
		return false;
	}
	if (!selectedFriend) {
		alert('please select a friend');
		return false;
	}
	if (!selectedImage) {
		alert('please select a image');
		return false;
	}
	
	// build the stream publish data object
	var post_to_stream = {
		message: '',
		attachment: {
			name: $.cookie('name') + ' dedicated ' + songs[selectedSong].title + ' to you! Click to see the video on CelineDion.com. Dedicate your own song now.', 
			href: link,
			caption: 'Celine: Through the Eyes of the World. Opening in Movie Theaters. Two Weeks Only. February 17-28.',
			media: [{
				type:'image',
				src: 'http://www.thehotticket.net/celinedion/dedicate/images/photos/' + selectedImage + '.gif',
				href: link
			}]
		},
		links: [
			{
				text: 'Dedicate a Song',
				href: link
			}
		]
		//,text: 'pop up text:'
	};
	
	// publish to friends stream
	FB_RequireFeatures(['Api', 'Connect', 'XFBML', 'Base', 'Common'], function(){
		FB.Connect.streamPublish(post_to_stream.message, post_to_stream.attachment, post_to_stream.links, selectedFriend.uid, post_to_stream.text, function(postInfo){
			
			if (typeof postInfo != 'undefined' && postInfo != 'null' && postInfo != null) {
				var postUserID = postInfo.split('_')[0];
				var postID = postInfo.split('_')[1];
				var selectedSong = $('#column-right ol.steps li.song-selector select.song-name').val();
				
				// track song posted
				var songTrackingName = songs[selectedSong].title.toLowerCase().replace(/[^a-z]/g, '');
				sCode.trackPageView('dedicate:' + songTrackingName,'celinedion');
				
				// show dedicate again notice
				$('#column-right #disabled-overlay div.content-overlay').html('<div class="dedicate-again">Make Another Dedication</div>');
				$('#disabled-overlay').css('display', 'block');
				
				$('#column-right #disabled-overlay div.content-overlay div.dedicate-again').bind('click', function () {
					$('#column-right #disabled-overlay div.content-overlay').html('');
					$('#disabled-overlay').css('display', 'none');
					return false;
				});
			} else {
				// skipped or closed
			}
		}, false);
	});
	
	return false;
};

/*
*	image selector 
*/
function nextImage (images, imageWidth) {
    var container = images.parent();
	if (!container.attr('currentImage')) container.attr('currentImage', 0);
    nextItem = parseInt(container.attr('currentImage')) ;
    container.attr('currentImage', (images.length-3) > nextItem+1 ? ++nextItem : nextItem);
    container.css('width', (images.length * imageWidth) + 'px');
    container.animate({marginLeft: -(nextItem  * imageWidth) + 'px'});
}

function selectImage () {
	var container = $(this).parent().parent();
	var imageID = $(this).attr('src').match(/\/([0-9]+)\.gif$/)[1];
	container.attr('selectedImage', imageID);
	
	$('li.image img', $(this).parent().parent()).removeClass('selected');
	$(this).addClass('selected');
}

function previousImage (images, imageWidth) {
    var container = images.parent();
    if (!container.attr('currentImage')) container.attr('currentImage', 0);
    nextItem = parseInt(container.attr('currentImage')) ;
    container.attr('currentImage', nextItem-1 >= 0 ? --nextItem : nextItem);
    container.css('width', (images.length * imageWidth) + 'px');
    container.animate({marginLeft: -(nextItem  * imageWidth) + 'px'});
}

$(document).ready(function(){

	// add element binds
	$('#column-right ol.steps li.image-selector a.previous').bind('click', function () {
		var images = $('#column-right ol.steps li.image-selector ul.images li.image');
		previousImage (images, 93);
		return false;
	});
	$('#column-right ol.steps li.image-selector a.next').bind('click', function () {
		var images = $('#column-right ol.steps li.image-selector ul.images li.image');
		nextImage (images, 93);
		return false;
	});
	$('#column-right ol.steps li.image-selector li.image img').bind('click', selectImage);
	$('#column-right ol.steps li.post a.post-to-facebook').bind('click', postToFriendsWall);
	$('#column-right ol.steps li.song-selector select.song-name').selectbox({width: 310});
	$('#column-right ol.steps li.friend-selector select.friend-name').selectbox({width: 275});
});