/* Author: 
	Jana and Keith Harper
	Duo Creative LLC
*/


$(document).ready(function() {


	
	// Open Filters
	$('.tags, .actions').click(function(e) {
		e.preventDefault();
		$('#usage_overlay').css('visibility', 'hidden');
		$('#filter_content').fadeIn('slow');
		$('.tags').fadeOut('fast');
		$('.actions').fadeOut('fast');
		$('#filter_tags').animate({
	    paddingTop: '210px'
	  }, 200, function() {
	    // Animation complete.
	  });
	});
	

	
	// Close Filters
	$('#button_update, #button_cancel').click(function() {
		$('#usage_overlay').css('visibility', 'hidden');
		$('#filter_content').fadeOut('fast');
		$('.tags').fadeIn('fast');
		$('.actions').fadeIn('fast');
		$('#filter_tags').animate({
	    paddingTop: '14px'
	  }, 200, function() {
	    // Animation complete.
	  });
	});
	
	
	
	// Display Library Dropdown - for Admins Only
	$('#library_name_trigger').mouseenter(function() {
		$('#library_list').css('visibility', 'visible');
		$('#library_name_trigger').addClass('bg_white');
	});
	
	// Keep the trigger background white while mousing around in layer
	$('#library_list').mouseenter(function() {
		$('#library_name_trigger').addClass('bg_white');
	});
	
	$('#library_list').mouseleave(function() {
		$('#library_name_trigger').removeClass();
	});

	// Hide Library Dropdown - for Admins Only
	$('#container_library').mouseleave(function() {
		$('#library_list').css('visibility', 'hidden');
		$('#library_name_trigger').removeClass();
	});
	
	
	
	// Display Timezone
	$('#button_edit_timezone').mouseenter(function() {
		$('#edit_timezone').css('visibility', 'visible');
	});

	// Hide Timezone
	$('#container_timezone').mouseleave(function() {
		$('#edit_timezone').css('visibility', 'hidden');
	});
	
	
	
	// Display Columns
	$('#button_edit_columns').mouseenter(function() {
		$('#edit_columns').css('visibility', 'visible');
	});
	
	// Hide Columns
	$('#container_columns').mouseleave(function() {
		$('#edit_columns').css('visibility', 'hidden');
	});
	
	
	
	// Display Export Options
	$('#button_export').mouseenter(function() {
		$('#export_options').css('visibility', 'visible');
	});
	
	// Hide Export Option
	$('#container_export').mouseleave(function() {
		$('#export_options').css('visibility', 'hidden');
	});
	
	
	
	// Flip the Show 'code' and remove brackets	
	$('.show_title_name').each(function(e){
		var content = $(this).html();
    	var contentParts = content.split('[');
    	if (contentParts.length == 2){
    		var showTitle =  $.trim(contentParts[0]);
	    	var showTag = $.trim(contentParts[1].replace(']', ''));
    		showTitle = '<div class=\'show_title_name_inner\'>' + showTitle + '</div>';
    		showTag = '<div class=\'show_title_name_inner_tag\'>' + showTag + '</div>';
		   	$(this).html(showTag + showTitle);
    	}
    	
    });
    
	    
	// Stripe the Table
	$('.stripeMe tr:odd').addClass('alt');
	$('.stripeMe tr:even').addClass('alt_off');
	
	
	
	// Enable Datepicker
	$('.datepicker').datepicker();
	
	
	
	// Display FAQs
	$('#television').click(function() {
		$('#faq_internet').css('display', 'none');
		$('#faq_tv').fadeIn('slow');
		$('#television').addClass('active');
		$('#internet').removeClass();
	});
	
	$('#internet').click(function() {
		$('#faq_internet').fadeIn('slow');
		$('#faq_tv').css('display', 'none');
		$('#television').removeClass();
		$('#internet').addClass('active');
	});
	
	
	
	// Overlay Trigger
	$('a[rel]').overlay({
		closeOnClick: false,
		closeOnEsc: false,
		mask: {
			color: '#fff',
			loadSpeed: 200,
			opacity: 0.5
		}
  	});
  	
	$('.button_purchase').bind('click', function(e) {
		e.preventDefault();
	});
  	
	$('#usage_new_trigger').bind('click', function(e) {
		e.preventDefault();
	});
	
	$('#usage_edit_trigger').bind('click', function(e) {
		e.preventDefault();
	});
	
	
	
	// Enable Column Sorting
	$('#column_list').sortable({
		axis: 'y'
	});
	
	$('#column_list li').disableSelection();

	$( "#column_list" ).bind( "sortstart", function(event, ui) {
		console.log("Column Order Before Reorder:");
		var oldOrder = $('#column_list').sortable('toArray');
		console.log(oldOrder);

	});
	
	$( "#column_list" ).bind( "sortstop", function(event, ui) {
		// TODO Sylvain 
		// Add code to handle changing column order
		// Sortable API Documentation: http://jqueryui.com/demos/sortable/
		console.log("Column Order After Reorder:");
		var newOrder = $('#column_list').sortable('toArray');
		console.log(newOrder);
		console.log("Column moved: ");
		console.dir(ui);
	});
	
/*	
	// Enable Column Resizing
	$("#detection_data").columnSizing();
	
	// TODO SYLVAIN
	// 1. Add unique "id" attributes to the resizable columns in the detection interface
	// 2. Change the following code wherever you see attr('class') to attr('id') 
	// 3. Add code to handle saving the new column widths
	var changingColumnWidth = false;
	var columnChanged = null;
	$(".jquery_columnSizing_handler").bind( "mousedown", function(e){
		changingColumnWidth = true;
		columnChanged = $(this).parent();
		var width =  $(columnChanged).width();
		console.log("BEFORE ----> Width: " + width + ", Class: '" + $(columnChanged).attr('class') + "'");
	});
	
	$("body").bind( "mouseup", function(e){
		if (changingColumnWidth){
			$(".jquery_columnSizing_handler").each(function(){
				var column = $(this).parent();
				if ($(column).attr('class') == $(columnChanged).attr('class')){
					var width =  $(column).width();
					console.log("AFTER ----> Width: " + width + ", Class: '" + $(column).attr('class') + "'");	
					columnChanged = null;
				}
			});
			changingColumnWidth = false;
		}
	});
	*/	
		
	
	function scrollToSection(target) {
    
    	var $time = 200; // time it takes to scroll
    	var $ease = 'easeout';
    
    	// find position of element, relative to document
    	var $posY = $(target).offset();
    	// scroll to this position
    	
    	if ($.browser.webkit) {
	    	$("body").animate({
	    		scrollTop: $posY.top, // you can offset the position here. Example: $posY.top-60
	    		duration: $time,
	    		easing: $ease
    		});
	    }
	    
	    if ($.browser.mozilla) {
	    	$("html").animate({
	    		scrollTop: $posY.top, // you can offset the position here. Example: $posY.top-60
	    		duration: $time,
	    		easing: $ease
	    	});
    	}
    	
    	// I am not sure whether or not IE uses 'html' or 'body' to scroll. Try both and let me know how it goes
    	if ($.browser.msie) {
	    	$("html").animate({
	    		scrollTop: $posY.top, // you can offset the position here. Example: $posY.top-60
	    		duration: $time,
	    		easing: $ease
	    	});
    	}
     
    };
    

	
	// CALLING THE FUNCTION
	$('#your_music1').click(function() { // The new ID from top of the page
    	scrollToSection("#its_your_music_were_listening"); // Scroll to the proper section
    	$('#content_tv').fadeIn('slow'); // Display the correct DIV
    	
    	// Don't forget to do the following, for each DIV inside #its_your_music_were_listening:
    	// $('#LIST ELEMENT').addClass('active');		- the list item being displayed
    	// $('#LIST ELEMENT').removeClass();			- all other list items (just like the existing code)
    	// $('#CONTENT DIV').css('display', 'none');	- all other content DIVS (just like exising code)

		$('#your_music_television').addClass('active');
		$('#your_music_internet').removeClass();
		$('#your_music_enterprise').removeClass();
		$('#your_music_admin').removeClass();
		//$('#content_tv').fadeIn('slow');
		$('#content_internet').css('display', 'none');
		$('#content_enterprise').css('display', 'none');
		$('#content_admin').css('display', 'none');
    });

		// CALLING THE FUNCTION
	$('#your_work1').click(function() { // The new ID from top of the page
    	scrollToSection("#its_your_music_were_listening"); // Scroll to the proper section
    	$('#content_internet').fadeIn('slow'); // Display the correct DIV
    	
    	// Don't forget to do the following, for each DIV inside #its_your_music_were_listening:
    	// $('#LIST ELEMENT').addClass('active');		- the list item being displayed
    	// $('#LIST ELEMENT').removeClass();			- all other list items (just like the existing code)
    	// $('#CONTENT DIV').css('display', 'none');	- all other content DIVS (just like exising code)

		$('#your_music_television').removeClass();
		$('#your_music_internet').addClass('active');
		$('#your_music_enterprise').removeClass();
		$('#your_music_admin').removeClass();
		$('#content_tv').css('display', 'none');
		//$('#content_internet').fadeIn('slow'); 
		$('#content_enterprise').css('display', 'none');
		$('#content_admin').css('display', 'none');

    });

		// CALLING THE FUNCTION
	$('#your_money1').click(function() { // The new ID from top of the page
    	scrollToSection("#its_your_music_were_listening"); // Scroll to the proper section
    	$('#content_admin').fadeIn('slow'); // Display the correct DIV
    	
    	// Don't forget to do the following, for each DIV inside #its_your_music_were_listening:
    	// $('#LIST ELEMENT').addClass('active');		- the list item being displayed
    	// $('#LIST ELEMENT').removeClass();			- all other list items (just like the existing code)
    	// $('#CONTENT DIV').css('display', 'none');	- all other content DIVS (just like exising code)

		$('#your_music_television').removeClass();
		$('#your_music_internet').removeClass();
		$('#your_music_admin').addClass('active');
		$('#your_music_enterprise').removeClass();
		$('#content_tv').css('display', 'none');
		$('#content_internet').css('display', 'none');
		//$('#content_admin').fadeIn('slow');
		$('#content_enterprise').css('display', 'none');

    });


});