/*
 * Canned Banners Javascript
 *
 * Copyright 2011 Canned Banners, LLC
 *
 * Author: Chris Mears <chris.mears@cannedbanners.com>
 * http://www.cannedbanners.com
 *
 * Depends:
 *	jquery.tabslideout.js
 *	jquery.jeditable.js
 *  jquery.form.js
 */
 
/*global $, document, savedBanners, console, Shadowbox*/
var cb = {};

cb.dialog = {
  init: function(type) {
    if ($('#saved-banners').length) {
      $('<div id="dialog-settings" />').appendTo("body");
      $('<div id="dialog-share" />').appendTo("body");
    }
    
    if ($('ul#cms-views').length) {
      $('<div id="dialog-create-view" />').appendTo("body");
    }
  },
  show: function($opener, t, event) {
    var title, markup, id, savedBanner;
    
    if ($opener) {
      id = $opener.attr("id").substring(14);
    }
        
    switch (t) {
      case 'share':
        savedBanner = savedBanners[id];
        markup = cb.dialog.build(t, savedBanner);
        title = 'Share this banner';
        break;
      case 'settings':
        savedBanner = savedBanners[id];
        markup = cb.dialog.build(t, savedBanner);
        title = 'Change banner settings';
        break;
      case 'create-view':
        title = 'Create a new view';
        var data = { types : {
          'elements' : 'Element', 
          'pages' : 'Page', 
          'landings' : 'Landing Page', 
          'layouts' : 'Layout'
        }};
        markup = cb.dialog.build(t, data);
        break;
      default:
        title = 'Dialog';
    }
    
    $("#dialog-"+t).html(markup).dialog({
      'title': title,
      'close': function() {
        $("#dialog-"+t).dialog("destroy");
      }
    });
    
    // Ensure dialog position
    if (t === 'share' || t === 'settings') {
      $(".ui-dialog").position({
        of: event,
        my: "center"
      });
    }
    
    if (t === 'settings') {
      $("#SavedEditForm").submit(function(event) {
        event.preventDefault();
        $(".ui-dialog .ui-dialog-title").append('<span class="indicator">Saving...</span>');
        $.post('/saved/edit',
          $("#SavedEditForm").serialize(),
          function(data, msg, xhr) {
            if (!$("#flashMessage").length) {
              $("#content").prepend('<div id="flashMessage" class="message"></div>');
              $("#flashMessage").hide();
            }
            $("#flashMessage").text(data + " " + savedBanner.name).fadeIn('slow').delay(4000).fadeOut(800);
            $(".ui-dialog .ui-dialog-title .indicator").remove();
            savedBanners[id].is_editable = $("#SavedIsEditable").is(":checked") ? "1" : "0";
            savedBanners[id].is_private = $("#SavedIsPrivate").is(":checked") ? "1" : "0";
            $("#dialog-settings").dialog('close');
          }
        );
      });
    }
    
    $("#SavedView").click(function() {
      $(this).select();
    });

    $('#dialog-'+t+' .cancel').click(function(event){
      event.preventDefault();
      $('#dialog-'+t).dialog('destroy');
    });
  },
  build: function(type, data) {
    var markup = '';

    switch(type) {
      case "settings":
        markup += '<div class="group">';
        markup += '<div class="name">' + data.name + '</div>';
        markup += '<form id="SavedEditForm" action="/saved/edit" accept-charset="utf-8">';
        markup += '<input type="hidden" name="data[Saved][id]" id="SavedId" value="' + data.id + '" />';
        markup += '<div class="input checkbox">';
        markup += '<input type="hidden" name="data[Saved][is_private]" id="SavedIsPrivate_" value="0" />';
        markup += '<input type="checkbox" name="data[Saved][is_private]" value="1" id="SavedIsPrivate"';
        markup += (data.is_private === '1') ? 'checked' : '';
        markup += ' />';
        markup += '<label for="SavedIsPrivate">Make banner private</label>';
        markup += '<span class="help-text">This prevents anyone but you from viewing, editing or saving this banner.</span>';
        markup += '</div>';
        markup += '<div class="input checkbox">';
        markup += '<input type="hidden" name="data[Saved][is_editable]" id="SavedIsEditable_" value="0" />';
        markup += '<input type="checkbox" name="data[Saved][is_editable]" value="1" id="SavedIsEditable"';
        markup += (data.is_editable === '1') ? 'checked' : '';
        markup += ' />';
        markup += '<label for="SavedIsEditable">Is publicly editable?</label>';
        markup += '<span class="help-text">If this is checked, people viewing this banner will be able to change text, images, and options. However, they will not be able to save any changes.</span>';
        markup += '</div>';
        markup += '<div class="submit">';
        markup += '<input type="submit" value="Save" />';
        markup += '<a href="#" class="cancel">Cancel</a>';
        markup += '</div>';
        markup += '</form>';
        markup += '</div>';
        break;
      case "share":
        var facebookURL = 'http://www.facebook.com/sharer.php?u=http://www.cannedbanners.com/saved/view/' + data.id;
        var twitterURL  = 'http://twitter.com/share?text=' + encodeURI('Check out the cool banner I created:') + '&url='+ encodeURI('http://www.cannedbanners.com/saved/view/' + data.id);
        markup += '<div class="group">';
        markup += '<div class="name">' + data.name + '</div>';
        markup += '<label for="SavedView" class="help-text">Copy and paste the link below into your email.</label>';
        markup += '<input type="text" id="SavedView" class="text readonly" readonly="readonly" value="http://www.cannedbanners.com/saved/view/' + data.id + '" />';
        markup += '<ul class="share-links group">';
        markup += '<li class="facebook"><a href="' + facebookURL + '" target="_blank">Share your ad on Facebook</a></li>';
        markup += '<li class="twitter"><a href="' + twitterURL + '" target="_blank">Tweet your ad on Twitter</a></li>';
        markup += '</ul>';
        markup += '</div>';
        break;
      case "create-view":
        markup += '<div class="group">';
        markup += '<form id="CreateView" action="/cms/create" method="post" accept-charset="utf-8">';
        markup += '<div class="input text">';
        markup += '<label for="name" class="help-text">Name (e.g. about, adwords1, no-menu, etc):</label>';
        markup += '<input type="text" id="name" name="name" class="text">';
        markup += '</div>';
        markup += '<div class="input select">';
        markup += '<label for="type" class="help-text">Type of view:</label>';
        markup += '<select name="type" id="type">';
        console.log(data);
        $.each(data.types, function(index, value) {
          markup += '<option value="'+index+'">'+value+'</option>';
        });
        markup += '</select>';
        markup += '</div>';
        markup += '<div class="submit buttons">';
        markup += '<button type="submit" class="positive">Create view</button>';
        markup += '<a href="#" class="cancel negative">Cancel</a>';
        markup += '</div>';
        markup += '</form>';
        markup += '</div>';
        break;
    }

    return (markup);
  }
};

cb.ui = {
  timerId: null,
  timerRetries: 0,
  
  init: function() {
    /** Flash Messages **/
    $('#flashMessage.success').delay(4000).fadeOut(800);

    /** Homepage **/
    $('.primary .video').hover(function() {
      $(this).addClass('highlight');
    }, function () {
      $(this).removeClass('highlight');
    });

    /** Gallery **/
    $('.info-banner .video').hover(function() {
      $(this).addClass('highlight');
    }, function () {
      $(this).removeClass('highlight');
    });
    
    $('.banner-container').hover(
      function () {
        $(this).addClass('hover').find('.customize-button').show();
      },
      function () {
        $(this).removeClass('hover').find('.customize-button').hide();
      }
    );
    
    $('.banner-container').find('.customize-button').hide();
    
    $('.banner-container:nth-child(3n+1)').addClass("cell-1");
    $('.banner-container:nth-child(3n+2)').addClass("cell-2");
    $('.banner-container:nth-child(3n+3)').addClass("cell-3");
    
    var bannerContainers = $('.banner-container'),
        numBannerContainers = $('.banner-container').length,
        lastCell= 0;
    
   // Calculate out last cell
    if ((numBannerContainers % 3) === 0) {
      lastCell = numBannerContainers - 4;  // index of 0
    } else {
      lastCell = (Math.floor(numBannerContainers / 3) * 3) - 1;
    }
    
    $('.banner-container:gt('+lastCell+')').addClass('last');

    /** Pages **/
    $(".toggle").click(function(event) {
      event.preventDefault();
      var id = $(this).attr("href");
      $(".example").fadeOut("fast");
      if ($(id).is(":visible")) {
        $(id).fadeOut("fast");
      } else {
        $(id).fadeIn();
      }
    });
    
    /** Inline editable fields **/
    $(".editable").editable('/saved/edit', {
      'indicator': "Saving...",
      'tooltip': "Click to edit...",
      'onblur': "submit"
    });
    $(".editable").hover(
      function() {
        $(this).css('background-color','#f9fbd9');
      },
      function() {
        $(this).css('background-color','transparent');
      }
    );
    
    /** Tables **/
    $("th a.asc, th a.desc").parent().addClass("sorted-by");
    
    $("table td.actions ul li > a").hover(
      function() {
        $(this).parents(".actions").children(".tooltip")
        .text($(this).attr("title"))
        .addClass("active");
      },
      function() {
        $(this).parents(".actions").children(".tooltip")
        .text("")
        .removeClass("active");
      }
    );
    
    if ($("#saved-banners").length) {
      cb.ui.initSavedActionMenu();
      
      $("#saved-banners .banner-images li").each(function() {
        var image = $(this).find("img");

        $(this).css("background-image", "url(" + $(image).attr("src") + ")");
        $(image).hide();
      });
      
      $("#saved-banners td.info a.approve").click(cb.ui.approveActionHandler);
    }
    
    var options = {
      expandSpeed : 150,
      collapseSpeed : 150
    };
    $(".file-tree").fileTree(options);
    
    $("#button-create-view").click(function(e) {
      e.preventDefault();
      
      cb.dialog.show(null, 'create-view', e);
    });
    
    if ($(".orders.download .please-wait").length) {
      cb.ui.timerId = setInterval(cb.ui.getOrderStatus, 3000);
    }
  },
  
  getOrderStatus : function() {
    var id = $("#order-status").data("order-id");
    
    $.get('/orders/status/'+id, function(data) {
      if (data.status === "Queued") {
        if (cb.ui.timerRetries >= 5 && cb.ui.timerRetries <= 15) {
          $("#order-status").text("Still waiting to be built. Thanks for your patience...");
        } else if (cb.ui.timerRetries > 15) {
          $("#order-status").text("Any second now...");
        }
        cb.ui.timerRetries += 1;
      } else if (data.status === "Compiling") {
        $("#order-status").text("Your banners are being built...");
      } else if (data.status === "Completed") {
        $(".orders.download .please-wait").hide();
        $(".orders.download .download-ready").removeClass("hidden");
        clearInterval(cb.ui.timerId);
      }
    });
  },
  
  /* TODO: Turn this into a plugin */
  initSavedActionMenu : function() {
    $("#saved-banners td.actions").each(function(index) {
      var options = ['<option value="">Choose an action...</option>'],
          select = $('<select />').attr('id', 'action-select-'+index),
          list = $(this).find("ul");
          
      list.find("li").each(function() {
        var item = $(this),
            link = item.find("a"),
            value = link.attr("href"),
            name = link.text(),
            confirmMsg, disabled;
        
        confirmMsg = link.data("confirm") ? ' data-confirm="'+link.data("confirm")+'"' : '';
        disabled = link.attr("disabled") ? ' disabled="disabled"' : '';
        
        options.push('<option value="'+value+'"'+confirmMsg+disabled+'>'+name+'</option>');
      });
      
      list.remove();
      select
        .append(options.join(''))
        .appendTo($(this))
        .change(cb.ui.savedActionMenuHandler);
    });
  },
  
  savedActionMenuHandler : function(event) {
    var $this = $(this),
        selectList = $this,
        approve = true,
        confirmMsg = null, 
        url, selected, selectedValue;
    
    if ($this.attr("disabled") === "disabled") { return false; }
    
    selected = $this.find("option:selected");
    selectedValue = selected.text().toLowerCase();
    
    if (selected.attr("confirm") !== "undefined") {
      confirmMsg = selected.data("confirm");
    }
    
    if (confirmMsg) {
      approve = confirm(confirmMsg);
    }

    if (approve === true) {
      url = $this.val();
      
      if (selectedValue === "edit" ||
          selectedValue === "make a copy" ||
          selectedValue === "delete" ||
          selectedValue === "approve") {
        
        selectList.append('<option value="wait">Please wait...</option>');
        selectList.val("wait");
        selectList.attr("disabled","disabled");
        window.location = url;
      }
      
      if (selectedValue === "settings" ||
          selectedValue === "share") {
        cb.dialog.show($this, selectedValue, event);
      }
      
      if ($this.val() !== "wait") {
        $this.val('');
      }
      
      // Initialize #flashMessage
      // TODO: Make this a global function
      if ($("#flashMessage").length) {
        $("#flashMessage").hide("fast").remove();
      }
      
      $('<div />').attr("id","flashMessage").addClass("message hidden").prependTo("#content");
    } else {
      $this.val('');
      return false;
    }
  },
  
  approveActionHandler : function(event) {
    var $this = $(this),
        approve = true,
        confirmMsg = null,
        tableCell = $this.parent();
    
    if ($this.attr("disabled") === "disabled") { return false; }
    
    if ($this.attr("confirm") !== "undefined") {
      confirmMsg = $this.data("confirm");
    }
    
    if (confirmMsg) {
      approve = confirm(confirmMsg);
    }

    if (approve === true) {
      tableCell.html("One moment please...");
      
      // Initialize #flashMessage
      // TODO: Make this a global function
      if ($("#flashMessage").length) {
        $("#flashMessage").hide("fast").remove();
      }
      
      $('<div />').attr("id","flashMessage").addClass("message hidden").prependTo("#content");
    } else {
      return false;
    }
  }
};

cb.form = {
  init: function() {
    $("#ContactAddForm").submit(function(event) {
      event.preventDefault();
      $.post('/contacts/add',
        $(this).serialize(),
        function(result) {
          $("#ContactAddForm input[type=text], #ContactAddForm textarea").val("");
          $("#feedback-message").html(result).effect("highlight", {}, 1000);
        }
      );
    });

    $("#ContactPartner").validate({
      'submitHandler': function(form) {
        $(form).ajaxSubmit({
          'success': function(result) {
            $("#feedback-message").html(result).effect("highlight", {}, 1000);
          },
          'resetForm': true
        });
        return false;
      }
    });
    
    $("#saved-banners td.actions a.approve").click(function(e){
      var $this = $(this),
          approve = false,
          confirmMsg = $this.attr("confirm"),
          url = $this.attr("href").substr(1);
      
      if ($this.attr("disabled") === "disabled") { return false; }
      
      e.preventDefault();
      $this.attr('disabled', 'disabled');
      $this.css({
        'cursor':'default',
        'background-image':'url(../img/bar-loader.gif)',
        'background-position':'5px 5px'
      });

      approve = confirm(confirmMsg);

      // Revert icon background if needed
      if (approve == true) {
        // Initialize #flashMessage
        // TODO: Make this a global function
        if ($("#flashMessage").length) {
          $("#flashMessage").hide("fast").remove();
        }
        
        $('<div />').attr("id","flashMessage").addClass("message hidden").prependTo("#content");
        
        var jqhxr = $.get(url, function(data) {
          $("#flashMessage").html(data)
            .addClass("success")
            .removeClass("message hidden")
            .delay(4000)
            .fadeOut(800);
          $this.addClass("disabled");
          $this.css({
           'background-position':'-163px -30px',
           'background-image':'url(../img/action-icons-sm.png)'
          });
        })
        .error(function() { 
          $("#flashMessage").html("We're sorry. There was an error processing your approve request.")
            .addClass("error")
            .removeClass("message hidden");
        });
      } else {
        $this.attr('disabled','');
        $this.css({
         'background-position':'-163px -4px',
         'background-image':'url(../img/action-icons-sm.png)'
        });
        return false;
      }
    });

    if ($("#sendCompleted").length) {
      $("#sendCompleted option[name='sendCompleted-"+defaultSelected+"']").attr("selected","selected");
    }

		if ($("#OrderUploadForm").length) {
			$.validator.methods.equal = function(value, element, param) {
	  		var fullPath = value;
	      if (fullPath) {
	        var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/'));
	        var filename = fullPath.substring(startIndex);
	        if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
	          filename = filename.substring(1);
	        }
	      }
	  		return filename == param;
	  	};
			
			var validator = $("#OrderUploadForm").validate({
				errorElement: "div",
				rules: {
					"data[Order][file]" : {
					  equal: orderName + '.zip'
					}
				},
				messages: {
				  "data[Order][file]" : {
				    equal: 'Your zip file must be '+orderName+'.zip'
				  }
				}
			});

			$(".file-uploaded .update").click(function(event) {
			  event.preventDefault();
			  $updateLink = $(this);
			  $("#OrderUploadForm").slideToggle('fast', function() {
			    if ($updateLink.text() == 'Update') {
			      
			    } else {
			      $updateLink.text('Update');
			    }
			  });
			});

			cb.form.initUploadForm();
		}
		
		$("#edit-draft-form button[type='submit']").click(function(e) {
		  e.preventDefault();
		  
		  var params = {
		    'view-path' : $('#view-path').val(),
		    'draft-content' : $('#draft-content').val()
		  }
		  
		  $.post('/cms/save', params, function(data, textStatus) {
		    smoke.signal(data.message);
		    $("#edit-draft-form .last-modified .datetime").text(data.lastModified).effect('highlight', {}, 3000);
		  });
		});
		
		$("#CreateView button[type='submit']").live('click', function(e) {
		  var params = {
		    'name' : $('#CreateView #name').val(),
		    'type' : $('#CreateView #type').val()
		  }
		  
		  $.post('/cms/create', params, function(data, textStatus) {
		    $(".ui-dialog .ui-dialog-content").dialog('destroy');
		    if (data.success) {
		      smoke.signal(data.success);
		    } else {
		      smoke.signal(data.error);
		    }
		  });
		  
		  return false;
		});
		
		$(".edit-draft .actions a.draft-revert").click(function(e) {
		  e.preventDefault();
		  
		  var url = $(this).attr('href');
		  
		  smoke.confirm("Revert draft?", function(e) {
		    if (e) {
		      $.post(url, function(data, textStatus) {
    		    smoke.signal(data.message);
    		    $("#edit-draft-form #draft-content").val(data.content);
    		    $("#edit-draft-form .last-modified .datetime").text(data.lastModified).effect('highlight', {}, 3000);
    		  });
		    }
		  });
		});
		
		$(".edit-draft .actions a.draft-publish").click(function(e) {
		  e.preventDefault();
		  
		  var url = $(this).attr('href');
      
      smoke.confirm("Publish draft?", function(e) {
		    if (e) {
		      $.post(url, function(data, textStatus) {
    		    smoke.signal(data.message);
    		  });
		    }
		  });
		});
		
		$(".edit-draft .actions a.draft-undo").click(function(e) {
		  e.preventDefault();
		  
		  var url = $(this).attr('href');
      
		  smoke.confirm("Undo publish?", function(e) {
		    if (e) {
		      $.post(url, function(data, textStatus) {
    		    smoke.signal(data.message);
    		  });
		    }
		  });
		});
  },
	initUploadForm : function() {
	  if ($(".file-uploaded").length) {
	    $("#OrderUploadForm").hide();
	  }
	}
};

cb.feedback = {
  init: function() {
    if (!$("#feedback").length) { return; }
  
    $('#feedback').show().tabSlideOut({
        tabHandle: '.handle',
        pathToTabImage: '/img/contact-us-tab.png',
        imageHeight: '95px',
        imageWidth: '31px',
        tabLocation: 'right',
        speed: 300,
        action: 'click',
        topPos: '75px',
        fixedPosition: true
    });
    
    $("#FeedbackForm").submit(function(event) {
      event.preventDefault();
      $.post('/contacts/add',
        $(this).serialize(),
        function(result) {
          $("#FeedbackForm input[type=text], #FeedbackForm textarea").val("");
          $("#feedback-form-result").html(result);
        }
      );
    });
  }
};