// General 
$default_font_style = "font-family:Verdana,Arial,Helvetica,sans-serif;font-size:12px;";

$gh_avatar_div = "float:left;width:50px;overflow:hidden;text-align:center;";
$gh_avatar = { width: "50px", height: "50px", background: "#f0f0f0", overflow: "hidden" };
$gh_meta = "text-align:right;margin-top:20px;color:#B699B9;font-size:10px;";
$gh_content = "margin-left:60px;color:#32312E;padding:0;";
$gh_city_link = "color:#A9BC22;";
$gh_user_name = { color:"#999999", fontSize: "10px", display: "block", overflow: "hidden" };

// Paging 
$page_nav_style = "font-family:Verdana,Arial,Helvetica,sans-serif;font-size:12px;margin:15px 0;text-align:center;padding-top:15px;";
$active_paging_link_style = "color:#000;";
$inactive_paging_link_style = "";
$current_page_style = "background-color:#9CBC00;";
$std_paging_style = "padding:4px 6px;text-decoration:none;border:1px solid #DDDDDD;";

// Photos & Videos
$photo_thumb_style = $video_thumb_style = "border:1px solid #AAAAAA; height:125px;margin:3px;padding:0;width:125px;";

// Back link 
$back_link_style = "text-decoration:underline;vertical-align:middle;text-align:center;font-weight:bold;color:#000;padding-bottom:15px;";

// Blog post
$blog_post_style = "border-bottom:1px dotted #D8D8D8;margin-bottom:10px;padding-bottom:10px;font-family:Verdana,Arial,Helvetica,sans-serif;color:#000;overflow:hidden;";

var $j = jQuery.noConflict();
var gh_debug = true;
var gh_domain = "ghive.com"; // auto-changed upon deployment

function display_gadget(username, context, category, options) {
  var id = "" + username + context + category;
  document.write("<div id='" + id + "' style='" + $default_font_style + "'></div>");
  get_data_feed(username, category, 1, "#" + id, context, options.image_width || 609);
}

function display_paging(element, current_page, no_of_pages, username, category, context) {
  if (no_of_pages > 1) {
    var page_nav = $j('<div id="pageNav"></div>').attr("style", $page_nav_style).appendTo(element);

    if (current_page > 1) {
      var l = $j('<a href="#" id="previous">&laquo; Previous</a>');
      l.attr("style", $active_paging_link_style + $std_paging_style);
      l.bind("click", { page : current_page - 1 }, function(event) {
        get_data_feed(username, category, event.data.page, element, context);
      });

      page_nav.append(l);
    } else {
      var l = $j('<span>&laquo; Previous</span>').attr("style", $inactive_paging_link_style + $std_paging_style);
      page_nav.append(l);
    }

    for (var i = 1; i < no_of_pages + 1; i++) {
      if (current_page == i) {
        var l = $j('<span>'+ i + '</span>').attr("style", $inactive_paging_link_style + $std_paging_style + $current_page_style);
        page_nav.append(l);
      } else {
        var l = $j('<a href="#">'+ i + '</a>');
        l.attr("style", $active_paging_link_style + $std_paging_style);
        l.bind("click", { page : i }, function(event) {
          get_data_feed(username, category, event.data.page, element, context);
        });
        page_nav.append(l);
      }

      // display ... to pad for 
      if (i == 9) {
        if (no_of_pages > 12) {
          page_nav.append('...');
          i = no_of_pages - 3;
        }
      }
    }

    if (no_of_pages > current_page) {
      var l = $j('<a href="#" id="next">Next &raquo;</a>');
      l.attr("style", $active_paging_link_style + $std_paging_style);
      l.bind("click", { page : current_page + 1 }, function(event) {
        get_data_feed(username, category, event.data.page, element, context);
      });
      page_nav.append(l);
    } else {
      var l = $j('<span class="inactive">Next &raquo;</span>').attr("style", $std_paging_style);
      page_nav.append(l);
    }
  }
}


function get_data_feed(username, category, current_page, element, context, image_width) { 
  if (context != "community") context = "feeds";
  
  $url = "http://" + gh_domain + "/" + username + "/" + context + "/"+ category +".json?page="+ current_page + "&jsoncallback=?";

  $j.getJSON($url, function(data) {
    show_page(data, username, category, current_page, element, context, image_width);
  });
}


function show_item(itemdata) {
  $j(itemdata.element).empty();

  var div = $j("<div style='text-align:center;padding-top:15px;overflow:hidden;' id='item'></div>").appendTo(itemdata.element);
  
  var link = $j("<a href='#'>&lt;&lt; Back to Gallery</a>");
  link.attr("style", $back_link_style);
  link.bind("click", function(event) {
    show_page(itemdata.data, itemdata.username, itemdata.category, itemdata.current_page, itemdata.element, itemdata.context);
  });
  
  div.append(link).append("<br>");
      
  if (itemdata.category == 'videos') {
    div.append(
      '<object width="425" height="344"><param name="movie" value=' + itemdata.video_url +
      '&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><embed src="' + itemdata.video_url +
      '&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed></object>');
  } else {
    div.append($j('<img/>').attr('src', itemdata.image_url));
  }
}

function gh_div(content, style, klass) {
  return "<div" +
    (style ? " style='" + style + "'" : "") +
    (klass ? " class='" + klass + "'" : "") +
    ">" + content + "</div>";
}

function show_page(data, username, category, current_page, element, context, image_width) {
  $j(element).empty();
  
  if (category == "upcoming_events") return show_calendar(data, element, context);
  
  var bp = "" + element + " .blogPost ";

  if ((category == 'news')  ||  (category == 'events')  || (category == 'surf_reports') || 
      (category == 'classifieds') || (category == 'other')) {

    $j.each(data.posts, function(i, post) {
      var post_el = $j('<div class="blogPost"></div>').attr("style", $blog_post_style);

      var title = "<a href='" + post.link + "' target='_blank'><h2>" + post.title + "</h2></a>";
      var time  = "<p class='posttime'>" + post.created_on + "</p>";
      var meta = "";
      var data;

      // Append meta-info to content
      metainfo = post.metainfo;
      if (post.category == "report") {
        meta =
          gh_div(
            "<img src=\"" + metainfo.thumb_icon + "\" border=\"0\">" +
            "<strong>" + metainfo.rating_label + "</strong>", false, "gh_thumb") +
          gh_div(
            "<span><strong>Time:</strong>" + metainfo.time + "</span>" +
            "<span><strong>Cond:</strong>" + metainfo.cond + "</span>" +
            "<span><strong>Surf:</strong>" + metainfo.surf + "</span>" +
            "<span><strong>Crowd:</strong>" + metainfo.crowd + "</span>" +
            "<span><strong>Wind:</strong>" + metainfo.wind + "</span>" +
            "<span class=\"tides\"><strong>Tides:</strong>" + metainfo.tides + "</span>",
            false, "gh_data");
      } else if (post.category == "event") {
        meta = gh_div(
          "<strong>Event Date:</strong> " + metainfo.event_date + "<br>" +
          "<strong>Location:</strong> " + metainfo.location + "<br>",
          false, "gh_data");
      } else if (post.category == "classified") {
        meta = gh_div(
          "<strong>Price:</strong> " + metainfo.price + "<br>",
          false, "gh_data");
      } 

      if (context == "community") {
        data =
          gh_div(post.avatar + post.postedby, $gh_avatar_div, "gh_avatar") +
          gh_div(title + meta + post.content, $gh_content) +
          gh_div(time + "   from " + post.city_link, $gh_meta, "gh_meta");
      } else {
        data = title + time + meta + post.content;
      }

      $j(post_el).append(data);
      $j(element).append(post_el);
    });
      
    display_paging(element, current_page, data.page_count, username, category, context);
    
    var rss_link = "http://" + gh_domain + "/" + username + "/" + context + "/" + category + ".xml";
    $j(element).append("Powered by <a target='_blank' href='http://ghive.com'>GHive.com</a> <a href='" + rss_link + 
      "'><img src='http://" + gh_domain + "/images/rss2.gif' border='0'></a>");
        
  } else if (category == 'photos') {

    var cont = $j('<div class="grid" style="overflow:hidden;"></div>');
    
    $j.each(data.photos, function(i, photo) {
      var pic = $j('<img/>').attr('src', photo.medium_photo).attr('style', 'height:135px;weight:135px').appendTo(cont);
      cont.append(" ");
      
      state = { data: data, username: username, category: category, current_page: current_page, element: element, image_url: photo.photo_location, context: context };
      pic.attr('style', $photo_thumb_style);
      pic.bind("click", state, function(event) { show_item(event.data); });
    });

    cont.appendTo(element);

    display_paging(element, current_page, data.page_count, username, category, context);
    $j(element).append("Start your own gallery <a target='_blank' href='http://ghive.com'>GHive.com</a>");
    
  } else if (category == 'videos') {
      
    var cont = $j('<div class="grid" style="overflow:hidden;"></div>');
    
    $j.each(data.videos, function(i, video) {
      var vid = $j('<img/>').attr('src', video.small_photo).attr('style', 'height:135px;weight:135px').appendTo(cont);
      cont.append(" ");
    
      state = { data: data, username: username, category: category, current_page: current_page, element: element, video_url: video.location, context: context };
      vid.attr('style', $video_thumb_style);
      vid.bind("click", state, function(event) { show_item(event.data); });
    });

    cont.appendTo(element);
    
    display_paging(element, current_page, data.page_count, username, category, context);
    $j(element).append("Start your own gallery <a target='_blank' href='http://ghive.com'>GHive.com</a>");

  } else {
    alert(category);
  }

  $j(bp + ".photo-section img").css({ width: "" + image_width + "px" });
  $j(bp + "h2, " + bp + "a").css({ color : "#32312E", fontSize: "14px" });
  $j(bp + "img").css("border", "0px");
  $j(bp + ".posttime").css({ fontSize: "10px" });

  $j(bp + ".gh_thumb").css({ float: "right" });
  $j(bp + ".gh_thumb strong").css({ display: "block", fontWeight: "bold", textAlign: "center", fontSize: "10px" });
  $j(bp + ".gh_data").css({ color: "#333333", marginBottom: "5px", overflow: "hidden", width: "330px", fontSize: "11px" });
  
  $j(bp + ".gh_data span").css({ float: "left", overflow: "hidden", width: "130px" });
  $j(bp + ".gh_data span.tides").css({ width: "185px" });
  $j(bp + ".gh_data span strong").css({ float: "left", paddingRight: "8px", textAlign: "right", width: "47px" });
  
  if (context == "community") {
    $j(bp + "h2").css({ fontWeight: "bold", fontSize: "12px", margin: "0 0 3px 0", padding: "0" });
    $j(bp + ".posttime").css({ display: "inline", paddingRight: "5px" });
    $j(bp + ".gh_meta a").css("color", "#A9BC22");
    $j(bp + ".avatarImage").css($gh_avatar);
    $j(bp + ".gh_avatar a").css($gh_user_name);
  }
}

function show_calendar(data, element, context) {
  var events = $j("<div class='events'>");
  
  $j.each(data.posts, function(i, event) {
    var date  = event.metainfo.event_date;
    var month = date.substring(0, 3).toUpperCase();
    var day   = date.substring(4, 6);
  
    var date  = $j("<div class='ghc_date'>");
    date.append(month);
    date.append($j("<strong/>").append(day));
  
    var info  = $j("<div class='ghc_info'>");
    info.append($j("<h4/>").append($j("<a target='_blank'/>").attr('href', event.link).append(event.title)));
    if (event.metainfo.location) info.append($j("<div class='ghc_loc'/>").append($j("<strong/>").append("Location: ")).append(event.metainfo.location));
    info.append($j("<div class='ghc_by'/>").append("by ").append($j(event.postedby)));
  
    events.append($j("<div class='ghc_event'>").append(date).append(info));
  });
  
  $j(element).append(events);
  
  var cred = $j("<div class='ghc_credits'>");
  if (context == "community") {
    var city_link = false;
    if (data.posts.length > 0) city_link = data.posts[0].city_link;
    if (city_link) cred.append($j("<strong/>").append("Events from ").append(city_link));
  } else {
    var link = $j("<a target='_blank'/>").attr("href", data.link + "/profile").append(data.author + "'s");
    cred.append($j("<strong/>").append(link).append(" Events"));
  }
  cred.append("<br>").append("Powered by <a target='_blank' href='http://ghive.com'>GHive.com</a>");
  
  $j(element).append(cred);
  
  // styling
  var bp = element + " .events ";
  
  $j(bp + ".ghc_event").css({ padding: "10px 0", overflow: "hidden" });
  $j(bp + ".ghc_date").css({
    background: "transparent url(http://" + gh_domain + "/images/events-img.gif) repeat-x scroll 0 0",
    color: "#CBF904", float: "left", fontSize: "9px", width: "32px", height: "30px", marginRight: "8px",
    paddingTop: "2px", textAlign: "center" });
  $j(bp + ".ghc_date strong").css({ display: "block", fontSize: "13px", fontWeight: "bold" });
  $j(bp + ".ghc_info").css({ marginLeft: "42px", color: "#343434" });
  $j(bp + ".ghc_info h4").css({ margin: "0", padding: "0", fontSize: "12px" });
  $j(bp + ".ghc_info h4 a").css({ color: "#343434" });
  $j(bp + ".ghc_by, " + bp + ".ghc_by a").css({ color: "#999A98" });
  $j(element + " .ghc_credits").css({ borderTop: "1px dotted #000", paddingTop: "10px", marginTop: "10px" });
  $j(element + " .ghc_credits, " + element + " .ghc_credits a").css({ color: "#000000" });
}