// basic load from tumblr
  
function HtmlEncode(html) {
 return $('<div/>').text(html).html();
}

function HtmlDecode(text) {
 return $('<div/>').html(text).text();
}


function loadSite(page_feed){
  var i = 0;
  $(page_feed).find("page").each(function(){
    var pageXML = $(this);
    
    //TODO: solve this problem
    var pageWidths = [220,250,180,250,250,250,250,250,250];
    
    var page = {
      idn: i,
      name: pageXML.attr('title'),
      contents: HtmlDecode(pageXML.contents()),
      width: pageWidths[i]
    };
    
    // now build the pageDialog template
    var pageTemplate='<div id="dialogContainer{{idn}}" title="{{name}}">\
    <div class="ItemDisplayContent">{{{contents}}}</div>\
</div>';
    
    var itemSelector = "#dialogContainer"+page.idn;
    $('#dialogContainer').append(Mustache.to_html(pageTemplate,page));
    // console.log("page in mustache");
    // console.log(page);
    // console.log(Mustache.to_html(pageTemplate,page));
    // $(itemSelector).html(Mustache.to_html(pageTemplate,page));
    
    var template = '<div class="boxcontent boxshadowcss"><a class="PageNavItem" id="linkToPage{{idn}}" targetid="page{{idn}}" idn="{{idn}}" href="#" onClick="">{{name}}</a></div>';
    
    $('#navLinks').append(Mustache.to_html(template,page));
    
    $('#linkToPage'+i).bind('click',function(){
      //console.log('nav click');
      var anchor = $(this);
      //console.log('.dialogContainer'+anchor.attr('idn'));
      if (anchor.parent().hasClass('toggle')){
        // close dialog and remove
        //console.log(anchor.data('dialogSelector'));
        if (anchor.data('dialogSelector'))
          $(anchor.data('dialogSelector')).dialog('close');
      } else {
        // open dialog
        var p = anchor.position();
      
        
        var dialog = $(itemSelector).dialog({
            //resizable:false,
            width:page.width+'px',
            //shadow:true, 
            autoOpen:false, 
            position:[p.left+200+(85*page.idn),p.top]
        });
        
        dialog
            .bind('dialogclose', function(event,ui){anchor.parent().removeClass('toggle');});
              
        // now open
        $(itemSelector).dialog('open');
              
        // now save the dialog back to the requester so it can keep track
        anchor.data('dialogSelector', itemSelector);
        
        //$('.ItemDisplayContent').html("hello");
        //$('.ItemDisplayContent').html(HtmlDecode(page.contents));
        anchor.parent().addClass('toggle');
      }
    });
    
    //$('#navLinks').append(HtmlDecode(page.attr('title')));
    i++;
  });
  
  
  
  // now let's get the posts in place

var postTemplate2='<div class="imageItem col{{cols}}">\
        <img src="{{photoUrl}}" class="boxinner"><br>\
        <div class="imageItemDescription"><span class="imageItemIndex">- {{itemIndex}} -</span> {{{photo-caption}}}</div>\
      </div>';

  $(tumblr_api_read.posts).each(function(postIndex,post){

    // no native way to zero-pad, do it via slice
    post.itemIndex=('00'+(tumblr_api_read.posts.length - postIndex)).slice(-3); 
    
    // set defaults for tag-variables
    post.cols=2; // default to 3 columns
    $(post.tags).each(function(tagIndex,tag){
      var kv = tag.split(":");
      if (kv.length === 2){
        post[kv[0]]=kv[1];
      }
    });
    
    // sizes with number of columns as index - cols are 80px wide
    var url_sizes = [100,100,250,400,500,500,1280,1280,1280,1280,1280];
    post.photoUrl=post['photo-url-'+url_sizes[parseInt(post.cols)]];
    
    $('#imageBox').append(Mustache.to_html(postTemplate2,post));
    
    
  });
  
  // once images load resize with masonry
  $(window).load(
    function(){
      // jquery masonry.  TODO: replace with custom layout solutio
      $('#imageBox').masonry({ 
        columnWidth: 110,
        itemSelector: '.imageItem',
      });  
    }
  );
  
  

};