/////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////
//   BOOKMARK MODUL  ////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////


//  INSTRUCTIONS FOR USE:
//
//  Will run independently of site //
//  1. Include <script language="javascript" type="text/javascript" src="BookmarkFunction/JAVASCRIPTS/BookmarkFrontendModul.js" /> in your header
//  2. Add  onclick="BookmarkIt(sermon_id,$my_user_id)" to any element that has a sermon_id (Product Id) associated with it.
//  3. The script will do the rest.




// FIRST INITIAL MODUL
//////////////////////////////////////////////////
function BookmarkIt (sermon_id, $my_user_id) {

  /// Draw Up Bookmark Modul
  ///////////////////////////////////////
  $("body").prepend("<div id='BookmarkModul'></div>");
  $('#BookmarkModul').fadeIn("slow");
  $('body').prepend("<div id='BookmarkMenu'></div>");
  $('#BookmarkMenu').css('height','270px').css('background-position','383px 0px');
  $('#BookmarkMenu').show();


  $('#BookmarkMenu').prepend("<form id='BookmarkForm'  method='get' action='javascript:GetValues ();' ><select id='BookmarkSelect' style='background:none; border: 1px solid #BBB; padding:5px; font-size:20px; width:280px; position:relative; margin-left:43px; margin-bottom:20px; color:#BBB;'>");

  $("<input id='ProductID' name='ProductID' value=" + sermon_id + " type='hidden' />").appendTo('#BookmarkForm');
  $("<input id='UserID' name='UserID' value=" + $my_user_id + " type='hidden' />").appendTo('#BookmarkForm');

  $('select').prepend("<option >Select a Folder</option>");
  $('option').prepend("</select>");
  $('select').prepend("</form>");
  $("<input type='text' id='FolderName' value='Your Folder Name' style='background:none; border: 1px solid #BBB; padding:5px; font-size:20px; width:280px; position:relative; margin-left:33px; margin-bottom:20px; color:#BBB;display:none'/>").appendTo('#BookmarkForm');
  $("<textarea  name='FolderDescription'  id='FolderDescription' style='background:none; border: 1px solid #BBB; padding:5px; font-size:20px; width:280px; height:170px;position:relative; margin-left:33px; color:#BBB;display:none;'>Folder Description</textarea>").appendTo('#BookmarkForm');
  $('#BookmarkMenu').prepend("<h5 id='title'>Bookmark</h5>");
  $('<span></span>').prependTo('#BookmarkMenu');
  ///////////////////////////////////////


  $('#FolderName').focus(function() {$('#FolderName').css('color', '#333').val('')   });
  $('#FolderName').blur(function() {$('#FolderName').css('color', '#BBB')   });
  $('#FolderDescription').focus(function() {$('#FolderDescription').css('color', '#333').val('')   });
  $('#FolderDescription').blur(function() {$('#FolderDescription').css('color', '#BBB')   });

  $.getJSON('/BookmarkFunction/PHP/ext_bookmarkpop.php?UserID=' + $my_user_id + '', function(data){
	  var html = '';
	  var len = data.length;
	  for (var i = 0; i< len; i++)
	  {
	   html += '<option value="' + data[i].FolderId + '">' + data[i].FolderName + '</option>';
	  }
	  $('#BookmarkSelect').append(html);
  });


  /// Default Options
  ///////////////////////////////////////
  $("<input value='Add File' title='Add File' id='BookmarkMenuInput' type='submit' />").appendTo('#BookmarkForm');
  $("<a id='NewFolder' title='Add New Folder'></a>").appendTo('#BookmarkMenu');
  ///////////////////////////////////////


  // Show The "Add Folder" Menu
  ///////////////////////////////////
  $('#NewFolder').click(function() {
  $('#NewFolder , #BookmarkMenuInput, #BookmarkSelect').fadeOut('fast');
  $('#BookmarkMenu').css('height','407px').css('background-position','0px 0px');
  $('#FolderName , #FolderDescription').fadeIn('slow');
  $('#BookmarkMenuInput').fadeIn('slow');

  });
  //////////////////////////////////

  /// Exit Bookmark Modul
  ///////////////////////////////////////
	  $('#BookmarkModul, #BookmarkMenu span').click(function() {CloseModul();});
  ///////////////////////////////////////


 return true;

};

function CloseModul() {

	   $('#BookmarkModul').remove().fadeOut ("slow");
	   $('#BookmarkMenu').remove();

	  };

//SEND OFF THE ID'S
/////////////////////////////////////////
function BookmarkItProcess ($UserID,$ProductID, $FolderId, $FolderName,$FolderDescription)
{

   $.getJSON("/BookmarkFunction/PHP/ext_bookmark.php",
	  {
		ProductID: $ProductID,
		UserID: $UserID,
		FolderId: $FolderId,
		FolderName: $FolderName,
		FolderDescription: $FolderDescription
	  },

 function(data){}




  );
  $("<div class='SuccessAlertOutside'>&nbsp;&nbsp;&nbsp;Success!</div>").prependTo('body');
		$('.SuccessAlertOutside').fadeIn('fast').delay(450).fadeOut('fast',function(){ $(this).remove();  });




};


// EMAIL FUNCTION. HANDLES THE ANIMATION, LAYOUT AND PASSES THE VALUES TO EMAILER PHP
////////////////////////////////////////////////////////////////////////////////////////////////////
function GetYourEmailOn () {
$('#EmailFriend, #BookmarkLink, #BookmarkMenuInput, #Header, #Sub').fadeOut('fast');// GIVE US  A CLEAN SLATE

 $("<input type='text' id='EmailForm' value='Your Friends Email' style='-khtml-appearance:none; background-color:#FFF; border: 1px solid #BBB; padding:5px; font-size:12px; width:227px; margin-top:20px; color:#BBB;display:none;'/> ").appendTo('#BookmarkMenu');
 $("#EmailForm").fadeIn("slow");

}

function GetValues () {


 	var  $UserID;
	$UserID = $('#UserID').val() ;

	var  $ProductID;
	$ProductID =  $('#ProductID').val();

    var  $FolderId;
	$FolderId = $('#BookmarkSelect').val();

	var  $FolderName;
	$FolderName = $('#FolderName').val();

	var  $FolderDescription;
	$FolderDescription =  $('#FolderDescription').val();

	BookmarkItProcess (  $UserID  , $ProductID , $FolderId, $FolderName , $FolderDescription );

	   $('#BookmarkModul').remove().fadeOut ("slow");
	   $('#BookmarkMenu').remove();
	
};
////////////////////////////////////////////////////////////////////////////////////////////////////