/**
 * Plugin: jquery.fbspr
 * 
 * Version: 1.0.0
 * (c) Copyright 2010, Stefan Kandlbinder
 * 
 * Description: jQuery plugin | get the members of a facebook group
 * 
 * History:
 * 1.0.0 - Nothing so far
 *
 **/
 
(function($) {
	$.fn.fbspr = function(options) {
		//
		// Set pluign defaults
		//
		var defaults = {
			gid: 77073167980,
			ie:false
		};
		
		var options = $.extend(defaults, options);
		
		//
		// check if you are using a microsoft browser - igitt!!!
		//
		var ie = false;
		if (jQuery.browser.msie) {
				options.ie = true;
		}
		
		//
		// THE MAIN JQUERY ROUTINE
		//
		return this.each(function() {
			var $caller = $(this);
			
			$caller.ajaxStart(function() {
				$("#members").append('<div class="ajaxLoader"><span class="ajaxLoaderText">...loading SPR group members</span></div>');
			});
			
			$caller.ajaxComplete(function() {
				$("div.ajaxLoader").hide();
			});
					
			//
			// get the group members
			//
			$.ajax({
				type: "GET",
				url:"https://api.facebook.com/method/groups.getMembers?gid=" + options.gid + "&access_token=2227470867|ZYPf-2_ZVO0lsjuHs42VsNjRMDo.&format=json&callback=?",
				dataType: "json",
				cache: true,
				timeout: 5000,
				success: function(data) {	
       		getMemberData(data, $caller);
				},
				error: err
			});
			
			//
			// get the group feed
			//
			$.ajax({
				type: "GET",
				url:"https://graph.facebook.com/" + options.gid +"/feed?access_token=2227470867|ZYPf-2_ZVO0lsjuHs42VsNjRMDo.&callback=?",
				dataType: "json",
				cache: true,
				timeout: 5000,
				success: function(data) {	
       		getPinwallData(data);
				},
				error: err
			});
			
			$('div.male').hover(function () {
					$('#members').addClass('showMale');
				}, 
				function () {
					$('#members').removeClass('showMale');
				}
			);
			
			$('div.female').hover(function () {
					$('#members').addClass('showFemale');
				}, 
				function () {
					$('#members').removeClass('showFemale');
				}
			);
			
			$('div.undefined').hover(function () {
					$('#members').addClass('showUndefined');
				}, 
				function () {
					$('#members').removeClass('showUndefined');
				}
			);

		});
		
		//
		// get all the data from the pinwall feed
		//
		function getPinwallData(data) {
			var $messages = $(data.data);
			var pinwallMessage = "";
			
			for (i=0; i<$messages.length; i++) {
			//for (i=0; i<15; i++) {
				var feedObject = new Object();
				var comms = "";
				
				feedObject.from = $messages[i].from.name;
				feedObject.message = $messages[i].message;
				feedObject.likes = $messages[i].likes;
				feedObject.picture = $messages[i].picture;
				feedObject.source = $messages[i].source;
				feedObject.name = $messages[i].name;
				feedObject.type = $messages[i].type;
				feedObject.link = $messages[i].link;
				feedObject.comments = $messages[i].comments;
				feedObject.createdTime = $messages[i].created_time;
				feedObject.likesDiv = "";
				feedObject.mimeType = "application/x-shockwave-flash";
				feedObject.messagesDiv = "";
				feedObject.fullPinwallMessage = "";
				
				switch(feedObject.type){
					case "status":
						generateStatusPinwallMessage(feedObject);
						break;
					case "video":
						generateVideoPinwallMessage(feedObject);
						break;
					case "photo":
						generatePhotoPinwallMessage(feedObject);
						break;
					case "link":
						generateLinkPinwallMessage(feedObject);
						break;
				}
				
				pinwallMessage += '<div class="pinWallMessage">' + feedObject.fullPinwallMessage + '' + feedObject.likesDiv + '<h4>' + feedObject.from + '</h4><p>'+ feedObject.message +'</p></div>';
			}
			
			$("#facebookPinwall").append(pinwallMessage).hide().fadeIn('slow');
			
			$("#facebookPinwall > div").hover(
				function () {
					$(this).find(".pinWallFullMessage").css("display", "block");
					/* $('#membersImages').animate({
						opacity: 0.5,
					}, 2000, function() {
						// Animation complete.
					}); */

				},
				function () {
					$(this).find(".pinWallFullMessage").css("display", "none");
					$("#membersImages").fadeIn(1000);
				}
			);
			
		}
		
		//
		// generate the pinwallMessage if it is type of status
		//
		function generateStatusPinwallMessage(feed) {
			setMessage(feed);
			setName(feed);
			getComments(feed);
			getLikes(feed);
			generateFullPinwallMessage(feed);
		}
		
		//
		// generate the pinwallMessage if it is type of video
		//
		function generateVideoPinwallMessage(feed) {
			setMessage(feed);
			setName(feed);
			getComments(feed);
			getLikes(feed);
			setMimeType(feed);
			generateFullPinwallMessage(feed);
		}
		
		//
		// generate the pinwallMessage if it is type of photo
		//
		function generatePhotoPinwallMessage(feed) {
			setMessage(feed);
			setName(feed);
			getComments(feed);
			getLikes(feed);
			generateFullPinwallMessage(feed);
		}
		
		//
		// generate the pinwallMessage if it is type of link
		//
		function generateLinkPinwallMessage(feed) {
			setMessage(feed);
			setName(feed);
			getComments(feed);
			getLikes(feed);
			generateFullPinwallMessage(feed);
		}
		
		//
		// get the comments if available
		//
		function getComments(feed) {
			if (feed.comments != undefined && feed.comments.data != undefined) {
				for (j=0; j<feed.comments.data.length; j++) {
					feed.messagesDiv += '<p><em>' + feed.comments.data[j].from.name + '</em>' + feed.comments.data[j].message + '</p>';
				}
			}
		}
		
		//
		// get the likes if available
		//
		function getLikes(feed) {
			var comms = "";
			var likes = "";
			var allTogether = "";
			
			if (feed.comments != undefined && feed.comments.data != undefined) {
				allTogether = '<div class="comms">' + feed.comments.data.length  + '<span>comm.</span></div>';
			}
				
			if (feed.likes != undefined && feed.comments != undefined  && feed.comments.data != undefined) {
				comms  = '<div class="comms">' + feed.comments.data.length  + '<span>comm.</span></div>';
				allTogether = '<div class="likes">' + feed.likes + '<span>likes</span>' + comms + '</div>';
			}
			
			if (feed.likes != undefined && feed.comments == undefined) {
				allTogether = '<div class="likes">' + feed.likes + '<span>likes</span></div>';
			}
			
						
			feed.likesDiv =  allTogether;
		}
		
		//
		// set the message if it is undefined
		//
		function setMessage(feed) {
			if (feed.message == undefined) {
				feed.message="SPR | Skateposse Rohrbach";
			}				
		}
		
		//
		// set the name if it is undefined
		//
		function setName(feed) {
			if (feed.name == undefined) {
				feed.name="SPR | Skateposse Rohrbach";
			}				
		}
		
		//
		// set the mime type of video
		//
		function setMimeType(feed) {
			if (feed.source != undefined) {
				if (feed.source.match("facebook")) {
					feed.mimeType = "video/mp4";
				}
			}
		}
		
		//
		// set the full pinwall message
		//
		function generateFullPinwallMessage(feed) {
			switch(feed.type) {
				case "status":
					feed.fullPinwallMessage = '<div class="pinWallFullMessage"><div class="fullArrow"></div><h3 		class="pinWallFullMessageName">' + feed.name + '</h3><div class="comments">' + feed.messagesDiv + '</div></div>';
					break;
					
				case "video":
					//alert(feed.source);
					if (feed.source.indexOf("&autoplay") != -1)
						//alert(feed.source.indexOf("&autoplay"));
						feed.source = feed.source.substr(0, feed.source.indexOf("&autoplay"));
					feed.fullPinwallMessage = '<div class="pinWallFullMessage"><div class="fullArrow"></div><h3 		class="pinWallFullMessageName">' + feed.name + '</h3><div class="video"><embed style="background-color:#ffff00" width="100%" height="100%" autoplay="false" bgcolor="#ffff00" name="plugin" src="' + feed.source + '" type="' + feed.mimeType + '"></div><div class="comments">' + feed.messagesDiv + '</div></div>';
					break;
					
				case "photo":
					feed.fullPinwallMessage = '<div class="pinWallFullMessage"><div class="fullArrow"></div><h3 		class="pinWallFullMessageName">' + feed.name + '</h3><div class="photo"><a href="' + feed.link + '" target="_blank"><img src="' + feed.picture + '" /></a></div><div class="comments">' + feed.messagesDiv + '</div></div>';
					break;
					
				case "link":
					if (feed.picture == undefined) {
						feed.fullPinwallMessage = '<div class="pinWallFullMessage"><div class="fullArrow"></div><h3 		class="pinWallFullMessageName">' + feed.name + '</h3><div class="link"><a href="' + feed.link + '" target="_blank">' + feed.link + '</a></div><div class="comments">' + feed.messagesDiv + '</div></div>';
					}
					else {
						feed.fullPinwallMessage = '<div class="pinWallFullMessage"><div class="fullArrow"></div><h3 		class="pinWallFullMessageName">' + feed.name + '</h3><div class="link"><a href="' + feed.link + '" target="_blank" class="zipflklotscha"><img src="' + feed.picture + '" /></a></div><div class="comments">' + feed.messagesDiv + '</div></div>';
					}					
					break;
			}
		}
		
		//
		// get the group member data
		//
		function getMemberData(data, caller) {
			var $members = $(data.members);
			var genderMeter = new Array();
			genderMeter['male'] = 0;
			genderMeter['female'] = 0;
			genderMeter['undefined'] = 0;
			
			$("#memberNumber").append(parseInt($members.length)+1);
			$('#memberNumber').delay(2400).animate({
				bottom: ['9px', 'easeOutBounce']
			}, 2000, 'linear', function() {
					//$(this).after('<div>Animation complete.</div>');
			});

			for (i=0; i<$members.length; i++) {
			//for (i=0; i<20; i++) {
				$.ajax({
					type: "GET",
					url: "https://graph.facebook.com/" + $members[i] + "?fields=id,name,picture,link,gender&callback=?",
					dataType: "json",
					cache: true,
					success: function(data) {	
						showMemberImage(data, genderMeter);
					},
					error: err
				});
			}
			
		}
		
		//
		//  show the member image
		//
		function showMemberImage(data, gender) {
			var genderClass = "";
			//loadImage(data);
			if (data.gender != undefined) {
				if (data.gender.charAt(0) == 'm') {
					genderClass = "m";
					gender['male'] += 1;
					$('#genderMeter div.male').html(gender['male']);
					$('#genderMeter div.male').width((gender['male']+12)*2);
				}
				if (data.gender.charAt(0) == 'w' || data.gender.charAt(0) == 'f') {
					genderClass = "f";
					gender['female'] += 1;
					$('#genderMeter div.female').html(gender['female']);
					$('#genderMeter div.female').width((gender['female']+12)*2);
				}
			} 
			else {
				genderClass = "u";
				gender['undefined'] += 1; 
				$('#genderMeter div.undefined').html(gender['undefined'] + '?');
				$('#genderMeter div.undefined').width((gender['undefined']+12)*2);
			}
			
			var memberImage = '<div class="member ' + genderClass  + '"><a href="' + data.link + '" target="_blank" class="membersLink"><img class="memberImage" src="' + data.picture + '" width="40" height="40"/></a></div>';
			var $memberImage = $(memberImage);
			
			$memberImage.hover(
				function () {
					appendMember(data, $memberImage);
				},
				function () {
					$(".hoverDiv").remove();
					if (options.ie)
						$('.member').css("z-index", "-1");
				}
			);
			
			//
			// append the hover member
			//
			function appendMember(data, image) {
				$image = $(image);
				$(".hoverDiv").remove();
								
				if (options.ie)
					$('.member').css("z-index", "-1");
					
				$image.find('a').append('<div class="hoverDiv"><img src="' + data.picture + '" /><p>' +  data.name + '</p><p class="gender">' +  data.gender + '</p></div>');
					
				if (options.ie)
					$image.css("z-index", "10000");
				
				}
			
			$("#membersImages").append($memberImage);
			
			//$("#memberInfo").append('<img class="memberImage" src="' + data.picture + '" title="' + data.name + '" alt="' + data.id + '" width="40" height="40"/>');
		}
		
		//
		// load an image
		//
		function loadImage(data) {
			var img = new Image();

			// wrap our new image in jQuery, then:
			$(img)
				// once the image has loaded, execute this code
				.load(function () {
					$("#members").append(this);
				})
				
				// if there was an error loading the image, react accordingly
				.error(function () {
					// notify the user that the image could not be loaded
					return;
				})
				
				// *finally*, set the src attribute of the new image to our image
				.attr('src', data.picture);
		}
		
		//
		// get the ajax error
		//
		function err(xhr, textStatus, errorThrown) {
			//alert('An error occurred! ' + errorThrown + textStatus);
			$("#members").prepend('<span class="ajaxLoaderText">OOPS - SOMETHING WENT WRONG - PLEASE RELOAD THE SITE</span>' + textStatus);
		}
	};
})(jQuery)