// Right Image
rsmFCimage1Url = 'http://public.AddictedToRubberStamps.com/FaveCraft/ShopOverview.png';
rsmFCimage1Href = 'http://www.AddictedToRubberStamps.com/?Affiliate=FaveCrafts';
rsmFCimage1Alt = 'AddictedToRubberStamps';
rsmFCimage1Width = 234;
rsmFCimage1Height = 60;

// Theme Names
var rsmFCtheme=new Array(5);
rsmFCtheme[0] = 'ATRS';
rsmFCtheme[1] = 'ATSB';
rsmFCtheme[2] = 'ATCS';
rsmFCtheme[3] = 'Frugalities';
rsmFCtheme[4] = 'ShopHandmade';

// Rollover Menu URLs
var rsmFCmenuUrl=new Array(5);
rsmFCmenuUrl[0] = 'http://www.addictedtorubberstamps.com/?Affiliate=FaveCrafts&Coupon=FAVECRAFTS40';
rsmFCmenuUrl[1] = 'http://www.addictedtoscrapbooking.com/?Affiliate=FaveCrafts&Coupon=FAVECRAFTS40';
rsmFCmenuUrl[2] = 'http://www.addictedtocrafts.com/?Affiliate=FaveCrafts&Coupon=FAVECRAFTS40';
rsmFCmenuUrl[3] = 'http://www.frugalities.com/?Affiliate=FaveCrafts&Coupon=FAVECRAFTS40';
rsmFCmenuUrl[4] = 'http://www.shophandmade.com/?Affiliate=FaveCrafts&Coupon=FAVECRAFTS40';

// Rollover Menu titles
var rsmFCmenuTitle=new Array(5);
rsmFCmenuTitle[0] = 'Addicted To Rubber Stamps';
rsmFCmenuTitle[1] = 'Addicted To Scrapbooking';
rsmFCmenuTitle[2] = 'Addicted To Crafts';
rsmFCmenuTitle[3] = 'Frugalities';
rsmFCmenuTitle[4] = 'ShopHandmade';

// HTML for the Rollout div
var rsmFCthemeHtmlHref = new Array(5);
rsmFCthemeHtmlHref[0] = 'http://www.AddictedToRubberStamps.com/?Affiliate=FaveCrafts&Coupon=FAVECRAFTS40';
rsmFCthemeHtmlHref[1] = 'http://www.AddictedToScrapbooking.com/?Affiliate=FaveCrafts&Coupon=FAVECRAFTS40';
rsmFCthemeHtmlHref[2] = 'http://www.AddictedToCrafts.com/?Affiliate=FaveCrafts&Coupon=FAVECRAFTS40';
rsmFCthemeHtmlHref[3] = 'http://www.Frugalities.com/?Affiliate=FaveCrafts&Coupon=FAVECRAFTS40';
rsmFCthemeHtmlHref[4] = 'http://www.ShopHandmade.com/?Affiliate=FaveCrafts&Coupon=FAVECRAFTS40';

var rsmFCthemeHtmlImage=new Array(5);
rsmFCthemeHtmlImage[0] = '<Img src="http://public.AddictedToRubberStamps.com/FaveCraft/ATRS.png" >';
rsmFCthemeHtmlImage[1] = '<Img src="http://public.AddictedToRubberStamps.com/FaveCraft/ATSB.png" >';
rsmFCthemeHtmlImage[2] = '<Img src="http://public.AddictedToRubberStamps.com/FaveCraft/ATCS.png" >';
rsmFCthemeHtmlImage[3] = '<Img src="http://public.AddictedToRubberStamps.com/FaveCraft/Frugalities.png" >';
rsmFCthemeHtmlImage[4] = '<Img src="http://public.AddictedToRubberStamps.com/FaveCraft/Handmade.png" >';

var rsmFCthemeHtmlText=new Array(5);
rsmFCthemeHtmlText[0] = 'World\'s largest art stamp and papercrafting store. More than 7,500 styles of art stamps and 1,000,000 items in stock.';
rsmFCthemeHtmlText[1] = 'World\'s largest scrapbooking store. Papers, stickers, stencils, albums, pens and inks galore. More than 1,000,000 items in stock.';
rsmFCthemeHtmlText[2] = 'Quilting, Knitting, Needle Arts, Paints, and General Crafts. One of the largest selections of crafting supplies anywhere.';
rsmFCthemeHtmlText[3] = 'Scrapbooking Supplies: Never pay retail again! Twice the selection of typical scrapbooking stores. Ridiculously cheap $3.99 flat rate shipping.';
rsmFCthemeHtmlText[4] = 'Buy handmade items direct from the artist. Sell your handmade items directly to customers. Recycle your partly-used craft supplies by selling them, too!';

var rsmFCthemeHtmlCoupon=new Array(5);
rsmFCthemeHtmlCoupon[0] = '<Img src="http://public.AddictedToRubberStamps.com/FaveCraft/ATRSCoupon.png" >';
rsmFCthemeHtmlCoupon[1] = '<Img src="http://public.AddictedToRubberStamps.com/FaveCraft/ATSBCoupon.png" >';
rsmFCthemeHtmlCoupon[2] = '<Img src="http://public.AddictedToRubberStamps.com/FaveCraft/ATCSCoupon.png" >';
rsmFCthemeHtmlCoupon[3] = '<Img src="http://public.AddictedToRubberStamps.com/FaveCraft/FRUGCoupon.png" >';
rsmFCthemeHtmlCoupon[4] = '';


// Display it all
function rsmFCFlyoutShow(flyoutAdDivName) {
   var flyoutAd = document.getElementById(flyoutAdDivName);
   if (!flyoutAd) {
         alert('Missing the necessary div "' + flyoutAdDivName + '".');
         return;
      }

   // Prevent re-entry, which seems to happen for some reason.
   var flyoutTop = document.getElementById('rsmFCFlyoutTop');
   if (flyoutTop) {
      return; }
      
   // Top
   rsmFCFlyoutAppendTop(flyoutAd);
   
   // Menu, (Text Menus)
   flyoutTop = document.getElementById('rsmFCFlyoutTop');
   rsmFCFlyoutAppendMenu(flyoutTop);

   // Rollout, (Theme image & slogan)
   var flyoutRollout = document.getElementById('rsmFCFlyoutRollout');
   for (i=0;i<rsmFCtheme.length;i++) {
      rsmFCFlyoutAppendTheme(flyoutRollout, i);
      }

   // Add Styles
   rsmFCFlyoutAddStyles();
   }
   
// Top Div
function rsmFCFlyoutAppendTop(flyoutAd) {
   
   // Top. Make this position:relative, so that it is the nearest parent containing div for the menu div. testing showed float:right was needed as well.
   var topHTML = '<div id=rsmFCFlyoutTop style="position:relative;float:right;" >';

   // Top
   var image1Style = 'BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; MARGIN: 0px 0px 0px 0px; FLOAT: right; BORDER-TOP: 0px; BORDER-RIGHT: 0px';
   topHTML += '<div id=rsmFCFlyoutimage1 style="FLOAT: right;" >';
   topHTML += '<A href="' + rsmFCimage1Href + '" target=_blank onMouseOver="rsmFCFlyoutPopUp();" onmouseout="rsmFCFlyoutPopDown();" >';
   topHTML += '<IMG style="' + image1Style + '" alt="' + rsmFCimage1Alt + '"';
   topHTML += 'src="' + rsmFCimage1Url + '" width=' + rsmFCimage1Width + ' height=' + rsmFCimage1Height + ' />';
   topHTML += '</A>';
   topHTML += '</div>';
   
   topHTML += '</div>';
   
   flyoutAd.innerHTML = topHTML;
   }

// Menu Div
function rsmFCFlyoutAppendMenu(flyoutTop) {
   var middleStyle = 'position:absolute;top:' + parseInt(rsmFCimage1Height,10) + 'px;left:0px;width:' + parseInt(rsmFCimage1Width,10) + 'px;display:none;background-color:white;border:solid 1px;margin:0px;padding:0px;';
   var middleHtml = '<div id=rsmFCFlyoutMiddle style="' + middleStyle + '" onmouseout="rsmFCFlyoutPopDown();" onmouseover="rsmFCFlyoutPopUp();" >';
   middleHtml += '<div style="margin:0px;padding:0px;" id=rsmFCFlyoutMenu onmouseout="rsmFCFlyoutPopDown();" onmouseover="rsmFCFlyoutPopUp();">';

   for (i=0;i<rsmFCtheme.length;i++) {
      middleHtml += '<span style="display:block;margin:0px;padding:0px;" >';
      middleHtml += '<a style="display:block;" class="rsmFCFlyoutLink" href="' + rsmFCmenuUrl[i] + '" onmouseout="rsmFCFlyoutPopDown();" onmouseover="rsmFCFlyoutPopRollout(&quot;' + rsmFCtheme[i] + '&quot;);" >';
      middleHtml += rsmFCmenuTitle[i]; 
      middleHtml += '</a>';
      middleHtml += '</span>';
      }
   
   middleHtml += '</div>';
   middleHtml += '<div id=rsmFCFlyoutRollout style="background-color:#FFFFD3;display:none;position:absolute;top:-1px;padding-top:2px;left:-' + (parseInt(rsmFCimage1Width,10) + 2)  + 'px;border:solid 1px;width:' + parseInt(rsmFCimage1Width,10) + 'px;" onmouseout="rsmFCFlyoutPopDown();" onmouseover="rsmFCFlyoutPopUp();" />';
   middleHtml += '</div>';
   
   flyoutTop.innerHTML += middleHtml;
   }

// Rollout themes images
function rsmFCFlyoutAppendTheme(rollout, themeIndex) {
   var themeInnerHTML = '';
   
   // Logo
   themeInnerHTML += '<a href="' + rsmFCthemeHtmlHref[themeIndex] + '" class="rsmFCFlyoutImage" >';
   themeInnerHTML += '<center>' + rsmFCthemeHtmlImage[themeIndex] + '</center><br>';
   themeInnerHTML += '</a>';
   
   // Text
   themeInnerHTML += '<div style="padding-left:4px;padding-right:4px;padding-bottom:5px;" >';
   themeInnerHTML += '<a href="' + rsmFCthemeHtmlHref[themeIndex] + '" class="rsmFCFlyoutText" >';
   themeInnerHTML += rsmFCthemeHtmlText[themeIndex];
   themeInnerHTML += '</a>';
   themeInnerHTML += '</div>';
   
   // Coupon
   if (rsmFCthemeHtmlCoupon[themeIndex] != '') {
      themeInnerHTML += '<div style="background-color:#E1EBF9;padding-top:5px;padding-bottom:5px;" >';
      themeInnerHTML += '<a href="' + rsmFCthemeHtmlHref[themeIndex] + '" class="rsmFCFlyoutCoupon" >';
      themeInnerHTML += '<center>' + rsmFCthemeHtmlCoupon[themeIndex] + '</center>';
      themeInnerHTML += '</a>';
      themeInnerHTML += '</div>';
      }

   // Div
   var flyoutTheme = document.createElement('div');
   flyoutTheme.id = 'rsmFCFlyoutRollout' + rsmFCtheme[themeIndex];
   flyoutTheme.style.display = 'none';
   flyoutTheme.onmouseover = 'rsmFCFlyoutPopUp()';
   flyoutTheme.onmouseout = 'rsmFCFlyoutPopDown()';
   flyoutTheme.innerHTML = themeInnerHTML;
   
   rollout.appendChild(flyoutTheme);
   }

function rsmFCFlyoutAddStyles() {
   var rsmFCFlyoutLinkStyle = rsmFCaddCSSRule('a.rsmFCFlyoutLink');
   rsmFCFlyoutLinkStyle.style.backgroundColor = 'white';
   rsmFCFlyoutLinkStyle.style.color = 'black';
   rsmFCFlyoutLinkStyle.style.textDecoration = 'none';
   
   // Add the special Hover style.
   var rsmFCFlyoutLinkHover = rsmFCaddCSSRule('a.rsmFCFlyoutLink:hover');
   rsmFCFlyoutLinkHover.style.backgroundColor = '#6351C4';
   rsmFCFlyoutLinkHover.style.color = 'white';
   rsmFCFlyoutLinkHover.style.textDecoration = 'underline';
   rsmFCFlyoutLinkHover.style.fontWeight = 'bold';

   var rsmFCFlyoutTextStyle = rsmFCaddCSSRule('a.rsmFCFlyoutText');
   rsmFCFlyoutTextStyle.style.color = '#1146AB';
   rsmFCFlyoutTextStyle.style.textDecoration = 'none';
   rsmFCFlyoutTextStyle.style.lineHeight = '17px';
   rsmFCFlyoutTextStyle.style.fontSize = '16px';
   
   var rsmFCFlyoutTextHover = rsmFCaddCSSRule('a.rsmFCFlyoutText:hover');
   rsmFCFlyoutTextHover.style.textDecoration = 'underline';
   
   var rsmFCFlyoutImageStyle = rsmFCaddCSSRule('a.rsmFCFlyoutImage img');
   rsmFCFlyoutImageStyle.style.border = '1px solid #FFFFD3';
   
   var rsmFCFlyoutImageHover = rsmFCaddCSSRule('a.rsmFCFlyoutImage img:hover');
   rsmFCFlyoutImageHover.style.border = '1px solid #1146AB';
   
   var rsmFCFlyoutImageStyle = rsmFCaddCSSRule('a.rsmFCFlyoutCoupon img');
   rsmFCFlyoutImageStyle.style.border = '1px solid #E1EBF9';
   
   var rsmFCFlyoutImageHover = rsmFCaddCSSRule('a.rsmFCFlyoutCoupon img:hover');
   rsmFCFlyoutImageHover.style.border = '1px solid #1146AB';}

// Popup functionality
var rsmFCFlyoutTimer; // Timeout variable
function rsmFCFlyoutPopDown() {
   clearTimeout(rsmFCFlyoutTimer);
   rsmFCFlyoutTimer= setTimeout(function() {rsmFCDoPopDown();},250);
   }
function rsmFCDoPopDown() {
   document.getElementById('rsmFCFlyoutRollout').style.display = 'none';
   document.getElementById('rsmFCFlyoutMiddle').style.display = 'none';
   }
function rsmFCFlyoutPopUp() {
   clearTimeout(rsmFCFlyoutTimer);
   document.getElementById('rsmFCFlyoutMiddle').style.display = 'block';
   }
function rsmFCFlyoutPopRollout(themeName) {
   clearTimeout(rsmFCFlyoutTimer);
   
   for (i=0;i<rsmFCtheme.length;i++) {
      document.getElementById('rsmFCFlyoutRollout' + rsmFCtheme[i]).style.display = 'none';
      }

   document.getElementById('rsmFCFlyoutRollout' + themeName).style.display = 'block';
   document.getElementById('rsmFCFlyoutRollout').style.display = 'block';
   }


//
// Dynamic CSS Adding code from http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript
function rsmFCgetCSSRule(ruleName, deleteFlag) {          // Return requested style obejct
   ruleName=ruleName.toLowerCase();                       // Convert test string to lower case.
   if (document.styleSheets) {                            // If browser can play with stylesheets
      for (var i=0; i<document.styleSheets.length; i++) { // For each stylesheet
         var styleSheet=document.styleSheets[i];          // Get the current Stylesheet
         var ii=0;                                        // Initialize subCounter.
         var cssRule=false;                               // Initialize cssRule. 
         do {                                             // For each rule in stylesheet
            if (styleSheet.cssRules) {                    // Browser uses cssRules?
               cssRule = styleSheet.cssRules[ii];         // Yes --Mozilla Style
            } else {                                      // Browser usses rules?
               cssRule = styleSheet.rules[ii];            // Yes IE style. 
            }                                             // End IE check.
            if (cssRule)  {                               // If we found a rule...
               if (cssRule.selectorText.toLowerCase()==ruleName) { //  match ruleName?
                  if (deleteFlag=='delete') {             // Yes.  Are we deleteing?
                     if (styleSheet.cssRules) {           // Yes, deleting...
                        styleSheet.deleteRule(ii);        // Delete rule, Moz Style
                     } else {                             // Still deleting.
                        styleSheet.removeRule(ii);        // Delete rule IE style.
                     }                                    // End IE check.
                     return true;                         // return true, class deleted.
                  } else {                                // found and not deleting.
                     return cssRule;                      // return the style object.
                  }                                       // End delete Check
               }                                          // End found rule name
            }                                             // end found cssRule
            ii++;                                         // Increment sub-counter
         } while (cssRule);                                // end While loop
      }                                                   // end For loop
   }                                                      // end styleSheet ability check
   return false;                                          // we found NOTHING!
}                                                         // end rsmFCgetCSSRule 

function rsmFCkillCSSRule(ruleName) {                     // Delete a CSS rule   
   return rsmFCgetCSSRule(ruleName,'delete');             // just call rsmFCgetCSSRule w/delete flag.
}                                                         // end rsmFCkillCSSRule

function rsmFCaddCSSRule(ruleName) {                      // Create a new css rule
   if (document.styleSheets) {                            // Can browser do styleSheets?
      if (!rsmFCgetCSSRule(ruleName)) {                   // if rule doesn't exist...
         if (document.styleSheets[0]) {
            if (document.styleSheets[0].addRule) {        // Browser is IE?
               document.styleSheets[0].addRule(ruleName, null,0);      // Yes, add IE style
            } else {                                      // Browser is IE?
               document.styleSheets[0].insertRule(ruleName+' { }', 0); // Yes, add Moz style.
            }                                             // End browser check
         }
      }                                                   // End already exist check.
   }                                                      // End browser ability check.
   return rsmFCgetCSSRule(ruleName);                      // return rule we just created.
}