/**
* This function takes care of displaying the corkboard into a specifiied div. The parameter array may contain the image URL or you can pass in 
* a reference to a seperate associative array and name of the field that contains the url. The assoicative array's index must match the 
* imageid field in corkarr. 
*
*  Each div within the corkboard contains has these field(s) set:
*  div.id - RockyouID of the picture - user/picture unique
*  div.imageid - mediaID
*  
*  corkarr param needs to be numerically indexed with atleast the following fields:
*  corkarr[i]['top']
*  corkarr[i]['left'] 
*  corkarr[i]['z']
*  corkarr[i]['width']
*  corkarr[i]['height']
*  corkarr[i]['imageid']
*  corkarr[i]['url']   (Optional)
*
*  If you use the imgarr and imgarr_tag params the imgarr array should be accesible like so imgarr[corkarr[i]['imageid']][imgarr_tag]
*
*  The first child of the Image div will always be the image. 
*
*  post_addFunc and pre_addFunc function parameters are called respective to when the Image has been added to the div_tag param. 
*  A reference to the Image Div is passed to the post/pre_addFunc functions as the first parameter.
*  This is most helpful when using the prototype Javascript library as prototype JS requires that an element must be added to the
*  page before setting binding any event listeners to the object. 
*  
*  Example scenario for pre/post func parameters usage:
*  Our corkboard contains pictures but we want to have them show additional button graphics. We would pass in a function to handle
*  appending button graphics for the pre_addFunc parameters and we would pass in a function that sets up handlers for the buttons as
*  the post_addFunc parameter.
**/

var INTERVALID = 0;
var CURRENTSTICKIE = 0;

var MAIN_MENU = new Array();

MAIN_MENU[0] = new Array();
MAIN_MENU[0]['page'] = 'browsePage';
MAIN_MENU[0]['label'] = 'Stickers';
MAIN_MENU[0]['url'] = 'javascript:cleanupInviteAndRedirect(\'browsePage\', \'ms-stickers-nav-browse-stickers\');'
MAIN_MENU[0]['invite_chain_continue'] = 'browsePage_friend_selector_continue';
MAIN_MENU[0]['invite_chain_main'] = 'browsePage_friend_selector_main';

MAIN_MENU[1] = new Array();
MAIN_MENU[1]['page'] = 'uploadPage';
MAIN_MENU[1]['label'] = 'Upload Stickers';
MAIN_MENU[1]['url'] = 'javascript:cleanupInviteAndRedirect(\'uploadPage\', \'ms-stickers-nav-upload-stickers\');'
MAIN_MENU[1]['invite_chain_continue'] = 'uploadPage_friend_selector_continue';
MAIN_MENU[1]['invite_chain_main'] = 'uploadPage_friend_selector_main';
    
MAIN_MENU[2] = new Array();
MAIN_MENU[2]['page'] = 'myStickersPage';
MAIN_MENU[2]['label'] = 'My Stickers';
MAIN_MENU[2]['url'] = 'javascript:cleanupInviteAndRedirect(\'myStickersPage\', \'ms-stickers-nav-my-stickers\');'
MAIN_MENU[2]['invite_chain_continue'] = 'myStickersPage_friend_selector_continue';
MAIN_MENU[2]['invite_chain_main'] = 'myStickersPage_friend_selector_main';

MAIN_MENU[3] = new Array();
MAIN_MENU[3]['page'] = 'myProfilePage';
MAIN_MENU[3]['label'] = 'My Profile';
MAIN_MENU[3]['url'] = 'javascript:cleanupInviteAndRedirect(\'myProfilePage\', \'ms-stickers-nav-edit-corkboard\');'


MAIN_MENU[4] = new Array();
MAIN_MENU[4]['page'] = 'earnPoints';
MAIN_MENU[4]['label'] = 'Earn Stickies';
MAIN_MENU[4]['url'] = 'javascript:cleanupInviteAndRedirect(\'earnPoints\', \'ms-stickers-nav-earn-points-a\');'
MAIN_MENU[4]['invite_chain_continue'] = 'earnPoints_friend_selector_continue';
MAIN_MENU[4]['invite_chain_main'] = 'earnPoints_friend_selector_main';



MAIN_MENU[5] = new Array();
MAIN_MENU[5]['page'] = 'shopPage';
MAIN_MENU[5]['label'] = 'Shop';
MAIN_MENU[5]['url'] = 'javascript:cleanupInviteAndRedirect(\'shopPage\', \'ms-stickers-nav-shop\');'
MAIN_MENU[5]['invite_chain_continue'] = 'shopPage_friend_selector_continue';
MAIN_MENU[5]['invite_chain_main'] = 'shopPage_friend_selector_main';


MAIN_MENU[6] = new Array();
MAIN_MENU[6]['page'] = 'helpPage';
MAIN_MENU[6]['label'] = 'Help Page';
MAIN_MENU[6]['url'] = 'javascript:cleanupInviteAndRedirect(\'help_page\', \'ms-stickers-nav-help-page\');'


    var totalStickies = -1;
    var current_page_index = null;

 function displayCorkboard(corkarr, div_tag, id_prefix, div_class, img_class, pre_addFunc, post_addFunc, imgarr, imgarr_tag)
 {
 
   document.getElementById(div_tag).innerHTML = "";
   
   for(var cnt = 0; cnt < corkarr.length; ++cnt)
   {
   
     var newdiv = document.createElement('div');  
          
     newdiv.id = corkarr[cnt]['id'];
     newdiv.className = div_class;
     newdiv.style.top = corkarr[cnt]['top'] + 'px';
     newdiv.style.left = corkarr[cnt]['left'] + 'px';
     newdiv.style.zIndex = corkarr[cnt]['z'];
     newdiv.style.width = corkarr[cnt]['width'] + 'px';
     newdiv.style.height =  corkarr[cnt]['height'] + 'px';
     newdiv.imageid = corkarr[cnt]['imageid'];
     
     thisImage = new Image();
       
     thisImage.className = img_class;
     thisImage.style.width = corkarr[cnt]['width'] + 'px';
     thisImage.style.height = corkarr[cnt]['height'] + 'px';
    
    //this is for a IE7 and IE6 div disappearing fix 
     var emptyDiv = document.createElement('div');
     emptyDiv.className = "empty_div";
     emptyDiv.id = "empty_div";
     
     newdiv.appendChild(thisImage);
     
     if(imgarr === null)
     {
       if(corkarr[cnt]['url'])
       {
            if( corkarr[cnt]['is_video'] == 1 )
            {
                thisImage.src = getVideoImage(corkarr[cnt]['url']);
                thisImage.style.position = 'absolute';
                
                var img_flvplay = document.createElement('img');
                    
                img_flvplay.src = 'http://cdn.rockyou.com/apps/stickers/stickers_play.png';
                img_flvplay.style.height = '66px';
                img_flvplay.style.width = '86px';
                img_flvplay.style.left = '50%';
                img_flvplay.style.top = '50%';
                img_flvplay.style.marginTop = '-43px';
                img_flvplay.style.marginLeft = '-33px';
                img_flvplay.style.position = 'absolute';
                
                newdiv.appendChild(img_flvplay);
            }
            else
                thisImage.src = revert_Turl(corkarr[cnt]['url']);
       }
     }
     else
     {
       thisImage.src = revert_Turl(imgarr[newdiv.imageid][imgarr_tag]);
     }
   
     
     if(pre_addFunc != null)
     {
       pre_addFunc(newdiv);
     }
     
     //this is for a IE7 and IE6 div disappearing fix
     document.getElementById(div_tag).appendChild(emptyDiv); 
     
     document.getElementById(div_tag).appendChild(newdiv); 
     
     if(post_addFunc != null)
     {
       post_addFunc(newdiv);
     }
   }
 
 }
 
function revert_Turl(turl)
{         
  split = turl.indexOf("stickers_t");
  rlen = 10; //length of "stickers_t"
 
  if(split != -1)
  {
    return (turl.substring(0,split) + "stickers" + turl.substring(split + rlen, turl.length));
  }
  else
  {
    return turl;
  }
}

function getVideoImage(url)
{
    var newURL = "";
    if( url.search("youtube.com/v/") != -1)
    {
        
        for (var i=url.search("/v/") + 3 ; i< url.length; i++ )
        {
            newURL += url.charAt(i);
        }
        
        newURL = "http://img.youtube.com/vi/" + newURL + "/default.jpg";
    }
    return newURL;
}

function get_turl(url)
{         
  split = url.indexOf("stickers");
  rlen = 8; //length of "stickers_t"
 
  if(split != -1)
  {
    return (url.substring(0,split) + "stickers_t" + url.substring(split + rlen, url.length));
  }
  else
  {
    return url;
  }
}    
  
        /**
        *  Function: displayNav
        *  Parameters:  string - page[currrent page that matches the "page" value for the MAIN_MENU array], string - tag[id of the element on the page], int-stickie[number of stickies to display]
        *  Return: None
        *
        *  Description: displayNav handles generating the HTML for the navigation atop the browsePage, It will set the bolded 
        *               choice according to the parameter page. The resulting HTML replaces whatever element that parameter tag refers to.
        *  
        **/        
function displayNav(page, tag, stickie, questionMarkNotifID)
{                 
    var i = 0;   
    var ihtml = '';     
     
    var navarr = MAIN_MENU;
    
    ihtml = '<ul class="menu_ul">';
    
    
    for(i=0; i< navarr.length; i++)
    {                 
         if(page == navarr[i]['page'] )  
         {
            ihtml += '<li class="menu_li_select">'+navarr[i]['label']+'</li>';
            current_page_index = i;
         }
         else
         {                
            ihtml += '<li class="menu_li"><a href="'+navarr[i]['url']+'">'+navarr[i]['label']+'</a></li>'; 
         }
    }    
    
    if(  page == 'multi_invite_page' )         
    {
            ihtml += '<li class="menu_li_select">'+'Invite Page'+'</li>';
    }
 

     if( typeof(stickie) != "undefined" && stickie != "")
     {
        if( typeof(questionMarkNotifID) != 'undefine' && questionMarkNotifID != 'undefined')
        {    ihtml += '<li class="menu_li"  id="' + page+ '_stickies" style="margin-left:87px; width: 140px; text-decoration:none; color:#777777;"> Stickies: <span style="color:green;">' + stickie + '</span> <span style="cursor:pointer" onclick="displayStickieFaq(' + current_page_index + ', \''+questionMarkNotifID+'\')"> (?) </span>';}
        else
        {    ihtml += '<li class="menu_li"  id="' + page+ '_stickies" style="margin-left:87px; width: 140px; text-decoration:none; color:#777777;"> Stickies: <span style="color:green;">' + stickie + '</span>';}
     }

    
    ihtml += "</li>";
     
    ihtml += '</ul>';                                                                                                                                        
     
     
     
    document.getElementById(tag).innerHTML = ihtml;    
}    



function animateStickieChange(page, timeInMilliSec, startStickie, endStickie, incrementValue, questionMarkNotifID)
{
    increment = (startStickie > endStickie)? -1:1;
    if( typeof(incrementValue) == 'undefined' )
    {
        incrementValue = 1;
    }
    
    timeInterval = Math.ceil(timeInMilliSec / ( Math.abs(startStickie - endStickie ) / incrementValue));
    
    setTimeout("animateStickieHelper('"+ page+"',"+ startStickie +","+ endStickie +","+ incrementValue +","+ increment+","+ timeInterval+", '" + questionMarkNotifID + "')", timeInterval);
}



function animateStickieHelper(page, startStickie, endStickie, incrementValue, incrementDirection, timeInterval, questionMarkNotifID)
{

    if( startStickie == endStickie )
    {
        
        if( typeof(questionMarkNotifID) != 'undefine' && questionMarkNotifID != 'undefined')
        {    document.getElementById(page + '_stickies' ).innerHTML = ('Stickies: <span style="color:green;">' + startStickie +'</span> <span style="cursor:pointer" onclick="displayStickieFaq(\''+ page + '\',\''+questionMarkNotifID+'\')"> (?) </span>' ); }
        else
        {    document.getElementById(page + '_stickies' ).innerHTML = ('Stickies: <span style="color:green;">' + startStickie +'</span> ');    }
        
        
        return;
    }
    
    var newStartStickieValue = parseInt(startStickie) + parseInt(incrementValue) * parseInt(incrementDirection);
    
    if( incrementDirection > 0 )
    {
        if( newStartStickieValue > endStickie) 
                newStartStickievalue = endStickie;
    }
    else 
    {
       if( newStartStickieValue < endStickie) 
                newStartStickievalue = endStickie;
    }

    if( typeof(questionMarkNotifID) != 'undefine' && questionMarkNotifID != 'undefined')            
    {    document.getElementById( page + '_stickies').innerHTML = ('Stickies: <span style="color:green;">' + newStartStickieValue + '<span> <span style="cursor:pointer" onclick="displayStickieFaq(\''+ page + '\',\'' +questionMarkNotifID+'\')"> (?) </span>');}
    else
    {    document.getElementById( page + '_stickies').innerHTML = ('Stickies: <span style="color:green;">' + newStartStickieValue + '<span> ');}
    
    setTimeout("animateStickieHelper('"+ page+"',"+ newStartStickieValue +","+ endStickie +","+ incrementValue +","+ incrementDirection+","+ timeInterval+",'" + questionMarkNotifID +"')", timeInterval);
}


function displayStickieFaq(pageIndex, id)
{
    
    var testCase = '';
    
    if(  (owner_id % 2) == 0 )
        testCase = 'a';
    else
        testCase = 'b';
        
    //making all users test case B
    testCase = 'b';
        
    var htmlStr = "<div class='faq_stickie_div'> <div style='font-weight: bold; font-size: 20px; '>What are Stickies?</div>";
    htmlStr += "<div style='font-size:12px'>'Stickies' are Stickers! points. </div><br>";
    htmlStr += "<div style='font-weight: bold; font-size: 20px; '>How do I earn more?</div>";  
    htmlStr += "<div style='font-size:12px'>Currently you can only earn stickies  <span style='color: green; font-style: italic; font-weight: bold;'> once every 24 hours </span> by logging into Stickers!</div>";
    htmlStr += "<div style='width:100%; margin-top: 5px; position:relative; cursor: pointer'  onclick='document.getElementById(\""+id+"\").style.display=\"none\"'><img src='http://cdn.rockyou.com/apps/stickers/addButton_on_fb.gif'  class='notif_button' id='notif_button' ></img><div class='notif_text'> OK </div> </div>";
    
    if( testCase == 'a')
        htmlStr += "<div style='width:100%; margin-top: 5px; position:relative; cursor: pointer'  onclick='prepopInvite(" + pageIndex + ", \"" + id + "\", \"ms-stickers-stickie-faq-invite-shop-a\")'><img src='http://cdn.rockyou.com/apps/stickers/addButton_on_fb.gif'  class='notif_button2' id='notif_button2' ></img><div class='notif_text2'> Invite Friends </div> </div>";
    else
        htmlStr += "<div style='width:100%; margin-top: 5px; position:relative; cursor: pointer'  onclick='gotoPage(\"earnPoints\", \"" + id +"\", \"ms-stickers-stickie-faq-invite-shop-b\")'><img src='http://cdn.rockyou.com/apps/stickers/addButton_on_fb.gif'  class='notif_button2' id='notif_button2' ></img><div class='notif_text2'> Earn Stickies </div> </div>";
        
    htmlStr += "</div>";
    
    document.getElementById(id).innerHTML = htmlStr;
    
    document.getElementById(id).style.display = 'block';
}

function prepopInvite(pageIndex, id, tracking)
{
    
    if( typeof(tracking) == "undefined" )
        tracking = null;
    
    document.getElementById(id).style.display = "none";
    
    //directJSONRequest('google_apps/server/RYOpenSocialDirectTrack.php?event=' + encodeURIComponent(tracking), function(data) { } );
    
    genericJSONRequest(
            'google_apps/server/RYOpenSocialMultiInviteService.php?' + Object.toQueryString({
            'filters': new Array('InstalledFilter'),
            'inviteMessage': "Hey [recipient], install Stickers! to see what stickers [sender] has sent you!",
            'chainMessage': "<b>Send stickers to more friends!</b>",
            'channel': tracking,
            'sendChainDivID': MAIN_MENU[pageIndex]['invite_chain_continue'],
            'hideDuringChainDivID': MAIN_MENU[pageIndex]['invite_chain_main']
        }),
       null
    );  
}

function gotoPage(page, id, tracking)
{
    if( typeof(tracking) == "undefined" )
        tracking = null;
    
    document.getElementById(id).style.display = "none";
    goto_canvas_page(page, tracking);
}

function displayInviteNav(page, tag)
{                 
    var i = 0;   
    var ihtml = '';     
     
    var navarr = MAIN_MENU;
    
    ihtml = '<ul class="menu_ul">';
    
    for(i=0; i< navarr.length; i++)
    {                 
         if(page == navarr[i]['page'])                   
         {
            ihtml += '<li class="menu_li"><a href="'+navarr[i]['url']+'">'+navarr[i]['label']+'</a></li>'; 
         }
         else
         {    
            continue;
         }
    }    
    
    ihtml += '<li class="menu_li_select">'+'Invite Page'+'</li>';
         
     ihtml += '</ul>';
     
     
    document.getElementById(tag).innerHTML = ihtml;

}  


        /**
        *  Function: cleanupInvites
        *  Parameters:  redirect - the page to redirect to, tarcking - the tracking tag to shoot off    
        *  Return: None
        *
        *  Description: Cleans the invite divs in all other pages then redirect 
        *  
        **/        
        
function cleanupInviteAndRedirect(redirect, tracking)  
{
    if( current_page_index != null )
    {
        var continueDiv= document.getElementById(MAIN_MENU[current_page_index]['invite_chain_continue']);
        if( continueDiv != null )
        {
            continueDiv.innerHTML = "";
            continueDiv.style.display = 'none';
        }
        
        var mainDiv= document.getElementById(MAIN_MENU[current_page_index]['invite_chain_main']);
        if( mainDiv != null )
            mainDiv.style.display = 'block';
    }
    
    if( current_page_index == 0)
        browsePage.sendCommentCB();
    else if( current_page_index == 1)
    {
        document.getElementById('up_overlay_main').style.display = "none";
        document.getElementById('up_overlay_main').innerHTML = "";
    }
    else if( current_page_index == 2)
        myStickersPage.sendCommentCB();
    
    goto_canvas_page(redirect, tracking);
}