//CCalendarAssets   would have all the data needed for the calendar selector page
// filtering happens on the client, since it is just a 2 while loops to get the data out.
  var data = '';
  var page = 1;
  var previousPage = 0;
  var ocas = 0;
  var userSelectedStyle=0;
  var userSelectedSize=-1;
  var tempSize=-1;
  var monthOptionSelected=0;
  var viewStyles = 0;
  var styleDisplayPos=0;
  var BROWSER_BACK_INIT = true;
  var timeOutFunction;
  var tempstyleid;
  var tempstylePos;
  var temppram;
  var fistOmniReq = true;
  var isScrollHeightSet = true;

  function setDisplayPage()
  {
       if(page == 1)
      {
          viewStyles=0;
          userSelectedSize=-1;
          document.getElementById("page1").style.display = "block";
          document.getElementById("page2").style.display = "none";
          document.getElementById("page3").style.display = "none";

          (new CStyleHeadView('stylehead')).renderStyleHead(data);
          (new CSizeHeadView('sizehead')).renderSizeHead(data);
          (new CStyleViewSection('fewstyles',ocas)).renderStyles(data);
          (new CSizeViewSection('sizes')).renderSizes(data);
          if(!fistOmniReq)
          document.location.href="#top";
      }
      else if(page == 2)
      {
          if(calAssets.getSize() != null)
          {
              userSelectedSize = getCalendarSizeId(calAssets.getSize());
              if(userSelectedSize == -1)
                viewStyles=0;
              else
                viewStyles=1;

              calAssets.setSize(null);
          }
          document.getElementById("page1").style.display = "none";
          document.getElementById("page2").style.display = "block";
          document.getElementById("page3").style.display = "none";
          (new CAllStyleViewSection('allstyles',viewStyles,userSelectedSize,userSelectedStyle)).renderAllStyles(data);
          renderShopCalendarText(userSelectedSize);      
          document.location.href="#top";
      }
      else
      {
          if(calAssets.getSize() != null && calAssets.getStyle() != null)
          {
              userSelectedSize = getCalendarSizeId(calAssets.getSize());
              userSelectedStyle = getCalendarStyleId(calAssets.getStyle());
              calAssets.setSize(null);
              calAssets.setStyle(null);
          }

          document.getElementById("page1").style.display = "none";
          document.getElementById("page2").style.display = "none";
          document.getElementById("page3").style.display = "block";

          (new CStyleMainContentDisplayView('styletextcontent',userSelectedStyle)).renderStyleMainContent(data);
          (new CMonthsViewSection('monthDisplayOptions',userSelectedSize,monthOptionSelected)).renderMonths(data);
          (new CStyleBackgroundsDisplayView('displaybackgrounds',userSelectedStyle,userSelectedSize)).renderStyleBackgrounds(data);
          if(userSelectedSize == -1)
          {
            userSelectedSize = (new CGetStyleSizeDetails(userSelectedStyle)).getSizeID(data);
            (new CStyleSizeSelectedDisplayView('sizestyledisplay',userSelectedStyle,userSelectedSize)).renderSelectedStyleSize(data);
            (new CStyleMainImageDisplayView('stylemaindisplayimage',userSelectedStyle,userSelectedSize)).renderStyleMainImage(data);
            //expandSize();
          }else
          {
            (new CStyleSizeSelectedDisplayView('sizestyledisplay',userSelectedStyle,userSelectedSize)).renderSelectedStyleSize(data);
            (new CStyleMainImageDisplayView('stylemaindisplayimage',userSelectedStyle,userSelectedSize)).renderStyleMainImage(data);
          }
		  (new CSizeSectionOption('changeSizes',userSelectedSize,userSelectedStyle)).renderOptionSizes(data);
          document.location.href="#top";
      }
      displayViewData(page);
  }


window.onscroll = function (e) {
    if(isScrollHeightSet && document.getElementById("greyout") && document.getElementById("greyout").style.display != "none")
    {
        document.getElementById("greyout").style.height = document.body.scrollHeight;
        document.getElementById("greyout").style.width= document.body.scrollWidth;
        isScrollHeightSet = false;
    }
 }

 function resizeFrame() {
    if(document.getElementById("greyout"))
    {
       isScrollHeightSet = true;
       document.getElementById("greyout").style.height= "100%";
       document.getElementById("greyout").style.width= "100%";
    }
}

/* Hack for IE*/
if(document.getElementById("greyout"))
  document.getElementById("greyout").style.width= document.body.scrollWidth;

  function showPageComponent(statePageId)
  {
    if(statePageId == page)
    {
      statePageId = statePageId -1;
    }
    if(page==3)
    {
      document.getElementById("greyout").style.display = "none";
      document.getElementById("greyout").style.visibility = "hidden";
    }

    if(statePageId > 0)
    {
      if(page!=1)
      viewPage(statePageId);
      else
      {
        var lm=CLinkManager.getInstance('/store');
        document.location.href=lm.getURL();
      }

    }
    else
    {
      var lm=CLinkManager.getInstance('/store');
      document.location.href=lm.getURL();
    }
  }

  function displayViewData(statePageId)
  {
    var state;
    if(BROWSER_BACK_INIT)
    {
      setBrowserBackInitSate(statePageId);
      BROWSER_BACK_INIT = false;
    }else
    {
        state = {
          showingBackComponent: statePageId,
          back: function() {
            showPageComponent(this.showingBackComponent);
          },
          forward: function() {
            showPageComponent(this.showingBackComponent);
          }
        };
        dojo.back.addToHistory(state);
    }
  }

  function setBrowserBackInitSate(statePageId)
  {
    var state = {
      showingComponent: statePageId,
      back: function() {
        showPageComponent(this.showingComponent);
      },
      forward: function() {
        showPageComponent(this.showingComponent);
      }
    };
    if(BROWSER_BACK_INIT)
       dojo.back.setInitialState(state);
    else
       dojo.back.addToHistory(state);
  }

function setPage()
{
  setDisplayPage();
  document.getElementById("dataload").style.display = "none";
  document.getElementById("dataload").style.visibility = "hidden";
  fistOmniReq =false;
}

function renderShopCalendarText(setSize)
{
	  var clAssets = calAssets.getAssets();
	  if(setSize >= 0 )
      {
        document.getElementById("calsizecaption").innerHTML= clAssets.sizes[setSize].size_disp ;
      }else
      {
      	document.getElementById("calsizecaption").innerHTML= clAssets.others[0].size_disp_text_default ;
      }
}

  function getCalendarSizeId(size)
  {
      var sizeList= calAssets.getAssets().sizes.length;
      var sizeId = -1;
      if(sizeList!= null && sizeList >0)
      {
        for(i=0; i<sizeList; i++)
        {
            if(calAssets.getAssets().sizes[i].fid == size)
            {
              sizeId = i;
              break;
            }
        }
      }
      return sizeId;
  }

  function getCalendarStyleId(style)
  {
      var styleList= calAssets.getAssets().styles.length;
      var styleId = 0;
      if(styleList!= null && styleList >0)
      {
        for(i=0; i<styleList; i++)
        {
            if(calAssets.getAssets().styles[i].fid == style)
            {
              styleId = i;
              break;
            }
        }
      }
      return styleId;
  }

 function openSharePopup()
 {
     if ( shareWindow =="[object]"){
         shareWindow.close();
     }
     var lm = null ;
     if ( openSharePopup.arguments.length == 0 ){
             lm = CLinkManager.getInstance( shareProductURL );
     }else{
             lm = CLinkManager.getInstance(openSharePopup.arguments[0]);
     }
     if(openSharePopup.arguments.length >1){
         lm.setURLParameter( IParameterConstants.PRD_TYPE, openSharePopup.arguments[1]);
     }else{
         lm.setURLParameter( IParameterConstants.PRD_TYPE, "store");
     }
     windowProperties = 'width=625,height=510,resizable,scrollbars=yes' ;
     shareWindow = window.open(lm.getURL(), null,windowProperties);
     shareWindow.top
 }

  function viewPage(pageNum)
  {
    previousPage=page;
    page =pageNum;
    setDisplayPage();
  }

  function onMonthSelection(element)
  {
    monthOptionSelected = element.value;
  }
  
  function onSizeSelection(element)
  {
    userSelectedSize = element.value;
	(new CMonthsViewSection('monthDisplayOptions',userSelectedSize,monthOptionSelected)).renderMonths(data);
	return userSelectedSize;
  }

  function styleSelection(pageNum,stlid)
  {
    viewStyles=0;
    userSelectedStyle=stlid;
    viewPage(pageNum);
  }

  function sizeSelection(pageNum,sizeid)
  {
    viewStyles=1;
    userSelectedSize = sizeid;
    viewPage(pageNum);
  }

  function viewAllStyles(pageNum)
  {
    viewStyles=0;
    viewPage(pageNum);
  }
  function changeStyleSelection(pageNum)
  {
    viewStyles=1;
    viewPage(pageNum);
  }
 function showBackgrounds(styleid,stylePos,pram)
  {
      tempstyleid = styleid;
      tempstylePos=stylePos;
      temppram=pram;
      if(pram=='out')
      {
        clearTimeout(timeOutFunction);
        document.getElementById('backgroundpopupdiv').style.display = 'none';
      }
      else
      {
        timeOutFunction = setTimeout("displayBackgrounds(tempstyleid,tempstylePos,temppram)",250);
      }
  }

  function displayBackgrounds(styleid,stylePos,pram)
  {
      styleDisplayPos=stylePos;
      if(pram=='out')
      {
          document.getElementById('backgroundpopupdiv').style.display = 'none';
      }
      else
      {
          document.getElementById('backgroundpopupdiv').style.display = 'block';
          //(new CPopupBackgroundsView('backgroundpopupdiv', styleid ,userSelectedSize,styleDisplayPos,page)).renderPopupBackgrounds(data);
          (new CPopupBackgroundsNewView('backgroundpopupdiv', styleid ,userSelectedSize,styleDisplayPos,page)).renderNewPopupBackgrounds(data);

      }
  }
  
  function backPage()
  {
      if(previousPage == 0)
        previousPage = 2
      document.getElementById("sizePopupDiv").style.display = "none";
      document.getElementById("greyout").style.display = "none";
      document.getElementById("greyout").style.visibility = "hidden";
      viewPage(previousPage);
  }

  function showSizeDetails(sizeId)
  {
     tempSize=sizeId;
    (new CSizeSelectionView('allsizediv',tempSize,userSelectedStyle)).renderSizeSelection(data);
    (new CSizeSelectedDisplayView('sizeselectedDetails',tempSize,userSelectedStyle)).renderSizeSelectionDisplay(data);
  }


  var   CCalendarAssets = Class.create({
    m_calendarAssets : null,
    m_CalSize : null,
    m_CalStyle : null,
    fillData : function(designsJson)
    {
     m_calendarAssets = designsJson;
    },
    setSize : function(size)
    {
       m_CalSize = size;
    },
    setStyle : function(style)
    {
       m_CalStyle = style;
    },
    getSize : function()
    {
       return m_CalSize;
    },
    getStyle : function()
    {
       return m_CalStyle;
    },
    getAssets : function()
    {
        return m_calendarAssets;
    }
    });

    var calAssets = new CCalendarAssets();

/*
To display few Calendars Styels.
        <div class="calendars-pannel"  style="margin:0px 10px 10px 0px;">
            <div class="seasonal">
                <p>seasonal Calendar</p>
                                <div class="calendar-imgs"><img src="/default/images/calendars/seasonal-calendar.jpg"></div>
                <div class="seasonal-background">12 background available</div>
            </div>
            <img class="gery-top-left" src="/default/images/calendars/gray-top-left.jpg" width="5" height="5">
            <img class="gery-top-right" src="/default/images/calendars/gray-top-right.jpg" width="5" height="5">
            <img class="gery-bottom-left" src="/default/images/calendars/grey-bottom-left.jpg" width="5" height="5">
            <img class="gery-bottom-right" src="/default/images/calendars/grey-bottom-right.jpg" width="5" height="5">
        </div>
*/
  var   CStyleViewSection = Class.create({
    initialize: function(div,occ) {
        this.m_div = div;
    this.m_occ = occ;
    },
    subscribe : function(topicName)
    {
        //this.m_defaultCategory = defaultCategory ;
        CEventDispatcher.subscribe( topicName , this , this.renderStyles );

    } , // end of init
    renderStyles : function(pageDataObject)
    {
        var m_CalData1 = calAssets.getAssets() ;//.getAssets();
            var styleDiv = $(document.createElement("div"));
            styleDiv.setAttribute("id", "displayFewStyleId");
        var occStyles = m_CalData1.occasions[$(this.m_occ)].styles;
        occStylesList= occStyles.split(",");
        if(occStylesList!= null && occStylesList.length>0)
        {
          for(i=0; i<occStylesList.length; i++)
      {
        if(i > 4)
        {
          i = (occStylesList.length -1);
        }

        var styleSizeList=m_CalData1.styles[occStylesList[i]].sizes;
        var styleSupSizesList;
        if(!(i == (occStylesList.length -1)) )
        styleSupSizesList = styleSizeList.split(",");
        var tempsizeId ;
        if(styleSupSizesList!= null && styleSupSizesList.length >0)
        {
          tempsizeId =styleSupSizesList[0];
          for(j=0; j<styleSupSizesList.length; j++)
          {
            if(m_CalData1.sizes[styleSupSizesList[j]].fid == '12x12')
            {
              tempsizeId=styleSupSizesList[j];
              break;
            }
          }
        }

        var eachstyleDiv = $(document.createElement("div"));
        eachstyleDiv.addClassName("calendars-pannel");
        eachstyleDiv.setStyle({margin:"0px 7px 7px 0px"});

                var stlTitle = $(document.createElement("div"));
                stlTitle.addClassName("seasonal");

                var titleP = document.createElement("p");

                            var headerDisplayNameNode = document.createTextNode(m_CalData1.styles[occStylesList[i]].header);
                titleP.appendChild(headerDisplayNameNode);


                var imageDiv = $(document.createElement("div"));
                imageDiv.addClassName("calendar-imgs");

                var anchorTag = document.createElement("a");
                anchorTag.setAttribute("id","link"+i);
                anchorTag.setAttribute("value" , occStylesList[i] + "," + i + "," + (i+1));
                if(i == (occStylesList.length -1) )
                {
                    anchorTag.setAttribute("href" , "javascript:viewAllStyles(2)");
                }
                else
                {
                    anchorTag.setAttribute("href" , "javascript:styleSelection(3,"+occStylesList[i] +")");
                    anchorTag.setAttribute("onMouseOver" , "javascript:showBackgrounds("+ occStylesList[i] + "," + i +",'over')");
                    anchorTag.setAttribute("onMouseOut" , "javascript:showBackgrounds("+ occStylesList[i] + "," + i +",'out')");
                    Event.observe(anchorTag, 'mouseover', function(){
                        argPassed =  this.getAttribute('value');
                        argPassedList= argPassed.split(",");
                        showBackgrounds( argPassedList[0], argPassedList[1] ,'over');
                    });
                    Event.observe( anchorTag,'mouseout', function(){
                        argPassed =  this.getAttribute('value');
                        argPassedList= argPassed.split(",");
                        showBackgrounds( argPassedList[0], argPassedList[1] ,'out');
                    });
                    Event.observe(anchorTag, 'click', function(){
                        argPassed =  this.getAttribute('value');
                        argPassedList= argPassed.split(",");
                    });
                }
                var imageTab = document.createElement("img");
                imageTab.setAttribute("src", m_CalData1.styles[occStylesList[i]].image0) ;

                anchorTag.appendChild(imageTab);
                imageDiv.appendChild(anchorTag);

                if(i == (occStylesList.length -1) )
                {
                    var footerDiv = $(document.createElement("div"));
                    footerDiv.setStyle({height:"20px"});
                    imageTab.setAttribute("title", " see all styles ") ;
                }
                else
                {
                    imageTab.setAttribute("title", " create this calendar ") ;
                    var footerDiv = $(document.createElement("div"));
                    footerDiv.addClassName("seasonal-background");
                    footerDiv.setStyle({cursor:"pointer"});
                    footerDiv.setAttribute("value" , occStylesList[i] + "," + i );
                    Event.observe(footerDiv, 'mouseover', function(){
                                  argPassed =  this.getAttribute('value');
                                  argPassedList= argPassed.split(",");
                                  showBackgrounds( argPassedList[0], argPassedList[1] ,'over');
                    });
                    Event.observe( footerDiv,'mouseout', function(){
                      argPassed =  this.getAttribute('value');
                      argPassedList= argPassed.split(",");
                      showBackgrounds( argPassedList[0], argPassedList[1] ,'out');
                    });
                    var footrDisplayNameNode = document.createTextNode(eval('m_CalData1.styles['+ occStylesList[i] + '].footer_' + m_CalData1.sizes[tempsizeId].fid));
                    footerDiv.appendChild(footrDisplayNameNode);
                }

                stlTitle.appendChild(titleP);
                stlTitle.appendChild(imageDiv);
                stlTitle.appendChild(footerDiv);

                var imageTopL = $(document.createElement("img"));
                imageTopL.addClassName("gery-top-left") ;
                imageTopL.setAttribute("src", m_CalData1.others[0].image_top_left) ;
                imageTopL.setAttribute("width", "5") ;
                imageTopL.setAttribute("height", "5") ;

                var imageTopR = $(document.createElement("img"));
                imageTopR.addClassName("gery-top-right") ;
                imageTopR.setAttribute("src", m_CalData1.others[0].image_top_right) ;
                imageTopR.setAttribute("width", "5") ;
                imageTopR.setAttribute("height", "5") ;

                var imageBotL = $(document.createElement("img"));
                imageBotL.addClassName( "gery-bottom-left") ;
                imageBotL.setAttribute("src", m_CalData1.others[0].image_bot_left) ;
                imageBotL.setAttribute("width", "5") ;
                imageBotL.setAttribute("height", "5") ;

                var imageBotR = $(document.createElement("img"));
                imageBotR.addClassName("gery-bottom-right") ;
                imageBotR.setAttribute("src", m_CalData1.others[0].image_bot_right) ;
                imageBotR.setAttribute("width", "5") ;
                imageBotR.setAttribute("height", "5") ;

                eachstyleDiv.appendChild(stlTitle);
                eachstyleDiv.appendChild(imageTopL);
                eachstyleDiv.appendChild(imageTopR);
                eachstyleDiv.appendChild(imageBotL);
                eachstyleDiv.appendChild(imageBotR);
                styleDiv.appendChild(eachstyleDiv);
            }
        }
        var x=document.getElementById("displayFewStyleId");
        if(x)
        {
            //TODO NEED TO WORK ON THIS
            $(this.m_div).innerHTML="";
        }
    $(this.m_div).appendChild(styleDiv);
    return;
    }
});


/*
To display Calendar all section.
*/

var CAllStyleViewSection = Class.create({
    initialize: function(div,displayType,sizeSelected,styleSelected) {
    this.m_div = div;
    this.m_DisplayType = displayType;
    this.m_SizeSelected = sizeSelected;
    this.m_StyleSelected = styleSelected;
    },
    subscribe : function(topicName)
    {
        //this.m_defaultCategory = defaultCategory ;
        CEventDispatcher.subscribe( topicName , this , this.renderAllStyles );

    } , // end of init
    renderAllStyles : function(pageData)
    {
        var m_CalData1 = calAssets.getAssets() ;//.getAssets();
        var styleDiv = document.createElement("div");
        styleDiv.setAttribute("id", "displayAllStyleId");
        var occStyles ='';
        if(this.m_DisplayType != 0)
        {
            if(this.m_SizeSelected == -1)
            {
                var styleSupSizes = m_CalData1.styles[this.m_StyleSelected ].sizes;
                var styleSupSizesList= styleSupSizes.split(",");
                occStyles = m_CalData1.sizes[styleSupSizesList[0]].styles;
            }
            else
         occStyles = m_CalData1.sizes[this.m_SizeSelected].styles;
        }
        else
        {
            var allStyKeys='' ;
            for(i=0; i<(m_CalData1.styles.length -1); i++)
            {
              allStyKeys = allStyKeys + ',' + i;
            }
            occStyles = allStyKeys.substring(1);
        }

        occStylesList= occStyles.split(",");
        if(occStylesList!= null && occStylesList.length>0)
        {
            for(i=0; i<occStylesList.length; i++)
            {
                var tempsizeId ;
                if(this.m_SizeSelected == -1)
                {
                  var styleSizeList=m_CalData1.styles[occStylesList[i]].sizes;
                  var styleSupSizesList= styleSizeList.split(",");
                  if(styleSupSizesList!= null && styleSupSizesList.length >0)
                  {
                    tempsizeId =styleSupSizesList[0];
                    for(j=0; j<styleSupSizesList.length; j++)
                    {
                      if(m_CalData1.sizes[styleSupSizesList[j]].fid == '12x12')
                      {
                        tempsizeId=styleSupSizesList[j];
                        break;
                      }
                    }
                  }
                }
                else
                {
                tempsizeId = this.m_SizeSelected;
                }
                var eachstyleDiv = $(document.createElement("div"));
                eachstyleDiv.addClassName("calendars-pannel");
                eachstyleDiv.setStyle({margin:"0px 7px 7px 0px"});

                var stlTitle = $(document.createElement("div"));
                stlTitle.addClassName("seasonal");

                var titleP = document.createElement("p");

                var headerDisplayNameNode = document.createTextNode(m_CalData1.styles[occStylesList[i]].header);
                titleP.appendChild(headerDisplayNameNode);


                var imageDiv = $(document.createElement("div"));
                imageDiv.addClassName( "calendar-imgs");

                var anchorTag = document.createElement("a");
                anchorTag.setAttribute("id","linka"+i);
                anchorTag.setAttribute("value" , occStylesList[i] + "," + i + "," + (i+1));
                anchorTag.setAttribute("href" , "javascript:styleSelection(3,"+occStylesList[i] +")");

                Event.observe(anchorTag, 'mouseover', function(){
                    argPassed =  this.getAttribute('value');
                    argPassedList= argPassed.split(",");
                    showBackgrounds( argPassedList[0], argPassedList[1] ,'over');
                });
                Event.observe( anchorTag,'mouseout', function(){
                    argPassed =  this.getAttribute('value');
                    argPassedList= argPassed.split(",");
                    showBackgrounds( argPassedList[0], argPassedList[1] ,'out');
                });
                Event.observe(anchorTag, 'click', function(){
                    argPassed =  this.getAttribute('value');
                    argPassedList= argPassed.split(",");
                });
                        //anchorTag.setAttribute("onMouseOver" , "javascript:showBackgrounds("+ occStylesList[i] + "," + i +",'over')");
                        //anchorTag.setAttribute("onMouseOut" , "javascript:showBackgrounds("+ occStylesList[i] + "," + i +",'out')");

                var imageTab = document.createElement("img");
                imageTab.setAttribute("src", m_CalData1.styles[occStylesList[i]].image0) ;
                imageTab.setAttribute("title", " Create this calendar ") ;
                anchorTag.appendChild(imageTab);
                imageDiv.appendChild(anchorTag);

                var footerDiv = $(document.createElement("div"));
                footerDiv.addClassName("seasonal-background");
                footerDiv.setStyle({cursor:"pointer"});
                footerDiv.setAttribute("value" , occStylesList[i] + "," + i );
                Event.observe(footerDiv, 'mouseover', function(){
                              argPassed =  this.getAttribute('value');
                              argPassedList= argPassed.split(",");
                              showBackgrounds( argPassedList[0], argPassedList[1] ,'over');
                });
                Event.observe( footerDiv,'mouseout', function(){
                  argPassed =  this.getAttribute('value');
                  argPassedList= argPassed.split(",");
                  showBackgrounds( argPassedList[0], argPassedList[1] ,'out');
                });

                var footrDisplayNameNode = document.createTextNode(eval('m_CalData1.styles['+ occStylesList[i] + '].footer_' + m_CalData1.sizes[tempsizeId].fid));
                footerDiv.appendChild(footrDisplayNameNode);


                stlTitle.appendChild(titleP);
                stlTitle.appendChild(imageDiv);
                stlTitle.appendChild(footerDiv);

                var imageTopL = $(document.createElement("img"));
                imageTopL.addClassName("gery-top-left") ;
                imageTopL.setAttribute("src", m_CalData1.others[0].image_top_left) ;
                imageTopL.setAttribute("width", "5") ;
                imageTopL.setAttribute("height", "5") ;

                var imageTopR = $(document.createElement("img"));
                imageTopR.addClassName( "gery-top-right") ;
                imageTopR.setAttribute("src",  m_CalData1.others[0].image_top_right) ;
                imageTopR.setAttribute("width", "5") ;
                imageTopR.setAttribute("height", "5") ;

                var imageBotL = $(document.createElement("img"));
                imageBotL.addClassName( "gery-bottom-left") ;
                imageBotL.setAttribute("src",  m_CalData1.others[0].image_bot_left) ;
                imageBotL.setAttribute("width", "5") ;
                imageBotL.setAttribute("height", "5") ;

                var imageBotR = $(document.createElement("img"));
                imageBotR.addClassName( "gery-bottom-right") ;
                imageBotR.setAttribute("src",  m_CalData1.others[0].image_bot_right) ;
                imageBotR.setAttribute("width", "5") ;
                imageBotR.setAttribute("height", "5") ;

                eachstyleDiv.appendChild(stlTitle);
                eachstyleDiv.appendChild(imageTopL);
                eachstyleDiv.appendChild(imageTopR);
                eachstyleDiv.appendChild(imageBotL);
                eachstyleDiv.appendChild(imageBotR);
                styleDiv.appendChild(eachstyleDiv);
            }
        }
        var x=document.getElementById("displayAllStyleId");
        if(x)
        {
            //TODO NEED TO WORK ON THIS
            $(this.m_div).innerHTML="";
        }
        $(this.m_div).appendChild(styleDiv);
        return;
    }
});

/*
To display Calendar size view section.
*/

    var CSizeViewSection = Class.create({
        initialize: function(div) {
        this.m_div = div;
    },
    subscribe : function(topicName)
    {
        //this.m_defaultCategory = defaultCategory ;
        CEventDispatcher.subscribe( topicName , this , this.renderSizes );

    } , // end of init
    renderSizes : function(pageDataObject)
    {

        var m_CalData = calAssets.getAssets() ;//.getAssets();
        var sizeDiv = document.createElement("div");
        sizeDiv.setAttribute("id", "displaySizeId");
        occSizeList= m_CalData.sizes.length;
        if(occSizeList!= null && occSizeList >0)
        {
            for(i=0; i<occSizeList; i++)
            {
                var eachSizeDiv = $(document.createElement("div"));
                eachSizeDiv.addClassName("calendars-pannel");
                eachSizeDiv.setStyle({margin:"0px 7px 7px 0px"});

                var stlTitle = $(document.createElement("div"));
                stlTitle.addClassName("seasonal");

                var titleP = document.createElement("p");

                var headerDisplayNameNode = document.createTextNode(m_CalData.sizes[i].name);
                titleP.appendChild(headerDisplayNameNode);


                var imageDiv = $(document.createElement("div"));
                imageDiv.addClassName("calendar-imgs");

                var anchorTag = document.createElement("a");
                anchorTag.setAttribute("href" , "javascript:sizeSelection(2,"+i +")");
                anchorTag.setAttribute("value" , m_CalData.sizes[i].fid );
                Event.observe(anchorTag, 'click', function(){
                    argPassed =  this.getAttribute('value');
                });

                var imageTab = document.createElement("img");
                imageTab.setAttribute("src", m_CalData.sizes[i].image0) ;
                anchorTag.appendChild(imageTab);
                imageDiv.appendChild(anchorTag);


                var footerDiv = $(document.createElement("div"));
                footerDiv.addClassName("seasonal-background");

                var monthsSupPrice= m_CalData.sizes[i].months.price;
                var monthSuppListPrice= monthsSupPrice.split(",");
                var priceStr = monthSuppListPrice[0];
                              
                if(priceStr.indexOf('@') == -1)
                {
                	var priceText = document.createTextNode("$"+priceStr);
                	var baseSpan = $ (document.createElement("span"));
                	baseSpan.appendChild(priceText);
                	footerDiv.appendChild(baseSpan);                	                	               	
                }
                else
                {
                   	var index = priceStr.indexOf('@');
                	var basePrice = priceStr.substr(0,index);
                	var salePrice = priceStr.substr(index+1);
                	
                	var baseText = document.createTextNode("$"+basePrice+" ");
                	var saleText = document.createTextNode("ON SALE $"+salePrice);
                
                   	var baseSpan = $ (document.createElement("span"));
                	baseSpan.addClassName("regular-price");
                	baseSpan.appendChild(baseText);
                           	
                	var saleSpan = $ (document.createElement("span"));
                	saleSpan.addClassName("sale-price");
                	saleSpan.appendChild(saleText); 
                            	
                	footerDiv.appendChild(baseSpan);
                	//footerDiv.appendChild(baseSpan);
                	footerDiv.appendChild(saleSpan);  
                }
                /*var footrDisplayNameNode = document.createTextNode(monthSuppListPrice[0]);
                alert("Footer:"+monthSuppListPrice[0]);
                footerDiv.appendChild(footrDisplayNameNode);*/
                	
                stlTitle.appendChild(titleP);
                stlTitle.appendChild(imageDiv);
                stlTitle.appendChild(footerDiv);

                var imageTopL = $(document.createElement("img"));
                imageTopL.addClassName( "gery-top-left") ;
                imageTopL.setAttribute("src", m_CalData.others[0].image_top_left) ;
                imageTopL.setAttribute("width", "5") ;
                imageTopL.setAttribute("height", "5") ;

                var imageTopR = $(document.createElement("img"));
                imageTopR.addClassName( "gery-top-right") ;
                imageTopR.setAttribute("src", m_CalData.others[0].image_top_right) ;
                imageTopR.setAttribute("width", "5") ;
                imageTopR.setAttribute("height", "5") ;

                var imageBotL = $(document.createElement("img"));
                imageBotL.addClassName("gery-bottom-left") ;
                imageBotL.setAttribute("src", m_CalData.others[0].image_bot_left) ;
                imageBotL.setAttribute("width", "5") ;
                imageBotL.setAttribute("height", "5") ;

                var imageBotR = $(document.createElement("img"));
                imageBotR.addClassName("gery-bottom-right") ;
                imageBotR.setAttribute("src", m_CalData.others[0].image_bot_right) ;
                imageBotR.setAttribute("width", "5") ;
                imageBotR.setAttribute("height", "5") ;

                eachSizeDiv.appendChild(stlTitle);
                eachSizeDiv.appendChild(imageTopL);
                eachSizeDiv.appendChild(imageTopR);
                eachSizeDiv.appendChild(imageBotL);
                eachSizeDiv.appendChild(imageBotR);
                sizeDiv.appendChild(eachSizeDiv);
            }
        }
        var x=document.getElementById("displaySizeId");
        if(x)
        {
            //TODO NEED TO WORK ON THIS
            $(this.m_div).innerHTML="";
        }
    $(this.m_div).appendChild(sizeDiv);
    return;
    }
});


/*
To display Months option selection.
*/
var CMonthsViewSection = Class.create({
    initialize: function(div,sizeId,selOption) {
        this.m_div = div;
        this.m_sizeId = sizeId;
        this.m_selOption = selOption;
    },
    subscribe : function(topicName)
    {
        //this.m_defaultCategory = defaultCategory ;
        CEventDispatcher.subscribe( topicName , this , this.renderMonths );

    } , // end of init
    renderMonths : function(pageDataObject)
    {
        var m_CalData1 = calAssets.getAssets() ;//.getAssets();
        var szId = this.m_sizeId;
        if(szId == -1)
         szId = 0;

        var monthsSup ='';
        var monthsSupPrice ='';

        monthsSup = m_CalData1.sizes[szId].months.supported;
        monthsSupPrice= m_CalData1.sizes[szId].months.price;

        monthSuppList= monthsSup.split(",");
        monthSuppListPrice= monthsSupPrice.split(",");

        var monthsDiv = document.createElement("div");
        monthsDiv.setAttribute("id", "displayMonthId");
        var monthLimit = m_CalData1.months.length;

        if(monthSuppList!= null && monthSuppList.length>0)
        {
            for(i=0; i<monthSuppList.length; i++)
            {

              var breakDiv = document.createElement("br");

                if(document.all && !window.opera && document.createElement)
                {
                    if(i==this.m_selOption)
                    var radioOpt = document.createElement("<input type='radio' name='monthOptions' id='monthOptions"+i+"' checked value='" + i + "'>");
                    else
                    var radioOpt = document.createElement("<input type='radio' name='monthOptions' id='monthOptions"+i+"' value='" + i + "'>");
                    radioOpt.setAttribute("prop" , m_CalData1.months[monthSuppList[i]].fid );
                    Event.observe(radioOpt, 'click', function(){
                        argPassed =  this.getAttribute('prop');
                        onMonthSelection(this);
                    });
                }
                else
                {
                  var radioOpt = $(document.createElement("input"));
                  radioOpt.name='monthOptions';
                  radioOpt.id = 'monthOptions';
                  radioOpt.type = 'radio';
                  radioOpt.value = i;
                  radioOpt.setAttribute("prop" , m_CalData1.months[monthSuppList[i]].fid );
                  Event.observe(radioOpt, 'click', function(){
                        argPassed =  this.getAttribute('prop');
                        onMonthSelection(this);
                  });

                  if(i==this.m_selOption)
                  radioOpt.checked=true;
                }

            var optionDisplayNameNode = document.createTextNode(m_CalData1.months[monthSuppList[i]].name + ' ');

            var priceDiv = $(document.createElement("span"));
            priceDiv.addClassName("dollar");
            var priceStr = monthSuppListPrice[i];
            var index = priceStr.indexOf('@');
            var footerDiv = $(document.createElement("div"));
            var price = "";
            if(index != -1)
            {
        		var index = priceStr.indexOf('@');
                	var basePrice = priceStr.substr(0,index);
                	var salePrice = priceStr.substr(index+1);
                	var baseText = document.createTextNode("$"+basePrice+" ");
                	var saleText = document.createTextNode("ON SALE $"+salePrice);
                   	var baseSpan = $ (document.createElement("span"));
                	baseSpan.addClassName("regular-price");
                	baseSpan.addClassName("dollar");
                	baseSpan.appendChild(baseText);
                           	
                	var saleSpan = $ (document.createElement("span"));
                	saleSpan.addClassName("sale-price");
                	saleSpan.addClassName("dollar");
                	saleSpan.appendChild(saleText); 
                            	
                	footerDiv.appendChild(baseSpan);
                	footerDiv.appendChild(saleSpan);  
                	
                	priceDiv.appendChild(footerDiv);
            }
            else
            {
            	price = priceStr;
    	        var priceDisplayNameNode = document.createTextNode("$"+price);
	            priceDiv.appendChild(priceDisplayNameNode);
            }
 			
            monthsDiv.appendChild(breakDiv);

            monthsDiv.appendChild(radioOpt);
            monthsDiv.appendChild(optionDisplayNameNode);
            monthsDiv.appendChild(priceDiv);
            }
        }
        var x=document.getElementById("displayMonthId");
        if(x)
        {
            //TODO NEED TO WORK ON THIS
            $(this.m_div).innerHTML="";
        }
    $(this.m_div).appendChild(monthsDiv);
    return;
    }
});


/*
To display to select size.
*/
var CSizeSelectionView = Class.create({
    initialize: function(div,sizeId,styleId) {
        this.m_div = div;
        this.m_sizeId = sizeId;
        this.m_styleId = styleId;
    },
    subscribe : function(topicName)
    {
        //this.m_defaultCategory = defaultCategory ;
        CEventDispatcher.subscribe( topicName , this , this.renderSizeSelection );

    } , // end of init
    renderSizeSelection : function(pageDataObject)
    {
        var m_CalData1 = calAssets.getAssets() ;//.getAssets();
            var sizeDisplayDiv = document.createElement("div");
            sizeDisplayDiv.setAttribute("id", "sizeSelectionDiv");
        var sizeCnts = m_CalData1.sizes.length;
        var szId = this.m_sizeId;
        var styleSupSizes = m_CalData1.styles[this.m_styleId].sizes;
        var styleSupSizesList= styleSupSizes.split(",");

        if(szId == -1)
        {
         szId = styleSupSizesList[0];
        }

        if(styleSupSizesList!= null && styleSupSizesList.length>0)
        {
            for(i=0; i<styleSupSizesList.length; i++)
            {
        var eachSizeDiv = $(document.createElement("div"));

          eachSizeDiv.setAttribute("id", "sizesdiv" +styleSupSizesList[i]);
        if(szId == styleSupSizesList[i])
          eachSizeDiv.addClassName( "calendars-sizes-orange");
        else
          eachSizeDiv.addClassName( "calendars-sizes");

        var anchorTag = document.createElement("a");
        anchorTag.setAttribute("href" , "javascript:showSizeDetails("+styleSupSizesList[i] +")");
        anchorTag.setAttribute("value" , m_CalData1.sizes[styleSupSizesList[i]].fid );
        Event.observe(anchorTag, 'click', function(){
            argPassed =  this.getAttribute('value');
        });

        var imageTab = document.createElement("img");
        imageTab.setAttribute("src",  m_CalData1.sizes[styleSupSizesList[i]].image1) ;
        imageTab.setAttribute("border",0);
        if(m_CalData1.sizes[styleSupSizesList[i]].fid == '12x12')
        {
            imageTab.setAttribute("width",104);
            imageTab.setAttribute("height",109);
        }else if(m_CalData1.sizes[styleSupSizesList[i]].fid == '11x14')
        {
            imageTab.setAttribute("width",102);
            imageTab.setAttribute("height",81);
        }else
        {
            imageTab.setAttribute("width",86);
            imageTab.setAttribute("height",68);
        }

        anchorTag.appendChild(imageTab);
        var displayText = document.createElement("span");
        var priceDisplayNameNode = document.createTextNode(m_CalData1.sizes[styleSupSizesList[i]].name);
        displayText.appendChild(priceDisplayNameNode);
        eachSizeDiv.appendChild(anchorTag);

        var br = document.createElement("br");
        eachSizeDiv.appendChild(br);

        var imageTab1 = document.createElement("img");
        imageTab1.setAttribute("src",  m_CalData1.others[0].popup_image_space) ;
        imageTab1.setAttribute("border",0);
        imageTab1.setAttribute("width",1);
        imageTab1.setAttribute("height",16);

        eachSizeDiv.appendChild(imageTab1);
        eachSizeDiv.appendChild(displayText);
        sizeDisplayDiv.appendChild(eachSizeDiv);
            }
        }
        var x=document.getElementById("sizeSelectionDiv");
        if(x)
        {
            //TODO NEED TO WORK ON THIS
                $(this.m_div).innerHTML="";
        }
    $(this.m_div).appendChild(sizeDisplayDiv);
    return;
    }
});


/*
<div class="styles-popup" style="width:212px;">
  <div class="styles-popup-top-shadow"></div>
  <div class="styles-popup-topleft-shadow"></div>
  <div class="styles-popup-topright-shadow"></div>
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td class="styles-popup-left-shadow"></td>
      <td class="styles-popup-content"> <h4>baby pink background designs</h4>
        <ul>
          <li><img src="images/thumb.gif" width="72" height="50" border="0"></li>
          <li><img src="images/thumb.gif" width="72" height="50" border="0"></li>
        </ul>
        <ul>
          <li><img src="images/thumb.gif" width="72" height="50" border="0"></li>
          <li><img src="images/thumb.gif" width="72" height="50" border="0"></li>
        </ul>
        <br style="clear:both;"></td>
      <td class="styles-popup-right-shadow"></td>
    </tr>
  </table>
  <div class="styles-popup-bottomleft-shadow"></div>
  <div class="styles-popup-bottomright-shadow"></div>
  <div class="styles-popup-bottom-shadow"></div>
  <div class="styles-bottom-arrow" align="center">
    <div class="styles-bottom-arrow-img"></div>
  </div>
</div>
*/
var CPopupBackgroundsNewView = Class.create({
  initialize: function(div,styleId,sizeId,displayPos,page) {
    this.m_div = div;
    this.m_styleId = styleId;
    this.m_sizeId = sizeId;
    this.m_displayPos = displayPos;
    this.m_page = page;
  },
  subscribe : function(topicName)
  {
    //this.m_defaultCategory = defaultCategory ;
    CEventDispatcher.subscribe( topicName , this , this.renderNewPopupBackgrounds );

  } , // end of init
  renderNewPopupBackgrounds : function(pageDataObject)
  {
    var m_CalData = calAssets.getAssets() ;//.getAssets();
    var stlBack ;
    if(this.m_sizeId == -1)
    {

      var styleSizeList=m_CalData.styles[this.m_styleId].sizes;
      var styleSupSizesList= styleSizeList.split(",");
      var tempsizeId ;
      if(styleSupSizesList!= null && styleSupSizesList.length >0)
      {
        tempsizeId =styleSupSizesList[0];
        for(i=0; i<styleSupSizesList.length; i++)
        {
          if(m_CalData.sizes[styleSupSizesList[i]].fid == '12x12')
          {
            tempsizeId=styleSupSizesList[i];
            break;
          }
        }
      }
    stlBack = eval("m_CalData.styles[" +  this.m_styleId + "].size_" + m_CalData.sizes[tempsizeId].fid);
    //stlBack = m_CalData.styles[this.m_styleId].background;
    }
    else
    {
      stlBack = eval("m_CalData.styles[" +  this.m_styleId + "].size_" + m_CalData.sizes[this.m_sizeId].fid);
    }

    styleBackList= stlBack.split(",");
    var displayTop = 0;
    var displayLeft = 0;
     var harPos = 0;
    var vertPos = 0;
    if(this.m_page == 1)
    {
      harPos = this.m_displayPos%2;
      vertPos = Math.floor(this.m_displayPos/2);
      displayTop = vertPos*20 + 190;
    }
    else if(this.m_page == 2)
    {
    harPos = this.m_displayPos%3;
    vertPos = Math.floor(this.m_displayPos/3);
    displayTop = -15 + vertPos*10 ;
    }
   
    if(harPos == 0)
    {
      if(this.m_page == 1)
      	displayLeft = 200;
      else
      displayLeft = -20;
    }
    else  if(harPos == 1)
    {
      if(this.m_page == 1)
      	displayLeft = 400;
      else
      displayLeft = 125;
    }
    else  if(harPos == 2)
    {
      displayLeft = 280;
    }

    var popupWidth = 225;
    displayTop = displayTop + (vertPos * 180);
    if(styleBackList!= null && styleBackList.length>0)
    {
      if(styleBackList.length > 4)
      {
          var extraWidth=styleBackList.length%2;
          if(extraWidth == 0)
          {
            extraWidth=styleBackList.length/2;
          }else
          {
            extraWidth= 1 + Math.floor(styleBackList.length/2);
          }
		  extraWidth = extraWidth -2;
          if(extraWidth == 1)
	          popupWidth = popupWidth + extraWidth * 80;          
          else
	          popupWidth = popupWidth + extraWidth * 79;
          if(extraWidth ==1)
          {
            if(harPos == 1)
            {
              displayLeft = displayLeft + 80 ;
            }
            if(harPos == 2)
            {
              displayLeft = displayLeft + 250 ;
            }
          }
          else if(extraWidth ==2)
          {
            if(harPos == 1)
            {
              displayLeft = displayLeft + 50 ;
            }
            if(harPos == 2)
            {
              displayLeft = displayLeft + 200 ;
            }
          }
          else if(extraWidth ==3)
          {
            if(harPos == 1)
            {
              displayLeft = displayLeft + 20 ;
            }
            if(harPos == 2)
            {
              displayLeft = displayLeft + 150 ;
            }
          }
          else if(extraWidth ==4)
          {
            if(harPos == 1)
            {
              displayLeft = displayLeft + 20 ;
            }
            if(harPos == 2)
            {
              displayLeft = displayLeft + 100 ;
            }
          }          

      }
      else
      {
        if(harPos == 1)
        {  
          if(this.m_page == 1)
          	displayLeft = displayLeft + 270 ;
          else
              displayLeft = displayLeft + 120 ;
        }
        if(harPos == 2)
        {
              displayLeft = displayLeft + 270 ;
        }
      }
    }

    var popupDisplayDiv = $(document.createElement("div"));
    popupDisplayDiv.setAttribute("id", "popupbackgrounddiv");
    popupDisplayDiv.setStyle({top:"61px",left:"-15px", width:"459px",position:"absolute"});

    var popupBckDiv = $(document.createElement("div"));
    popupBckDiv.addClassName("styles-popup");


    var imageSpacer1 = $(document.createElement("img"));
    imageSpacer1.setAttribute("src",  m_CalData.others[0].popup_image_space) ;
    imageSpacer1.setAttribute("border",0);
    imageSpacer1.setAttribute("width",1);
    imageSpacer1.setAttribute("height",1);

    var imageSpacer2 = $(document.createElement("img"));
    imageSpacer2.setAttribute("src",  m_CalData.others[0].popup_image_space) ;
    imageSpacer2.setAttribute("border",0);
    imageSpacer2.setAttribute("width",1);
    imageSpacer2.setAttribute("height",1);

    var imageSpacer3 = $(document.createElement("img"));
    imageSpacer3.setAttribute("src",  m_CalData.others[0].popup_image_space) ;
    imageSpacer3.setAttribute("border",0);
    imageSpacer3.setAttribute("width",1);
    imageSpacer3.setAttribute("height",1);

    var imageSpacer4 = $(document.createElement("img"));
    imageSpacer4.setAttribute("src",  m_CalData.others[0].popup_image_space) ;
    imageSpacer4.setAttribute("border",0);
    imageSpacer4.setAttribute("width",1);
    imageSpacer4.setAttribute("height",1);

    var imageSpacer5 = $(document.createElement("img"));
    imageSpacer5.setAttribute("src",  m_CalData.others[0].popup_image_space) ;
    imageSpacer5.setAttribute("border",0);
    imageSpacer5.setAttribute("width",1);
    imageSpacer5.setAttribute("height",1);

    var imageSpacer6 = $(document.createElement("img"));
    imageSpacer6.setAttribute("src",  m_CalData.others[0].popup_image_space) ;
    imageSpacer6.setAttribute("border",0);
    imageSpacer6.setAttribute("width",1);
    imageSpacer6.setAttribute("height",1);

    var imageSpacer7 = $(document.createElement("img"));
    imageSpacer7.setAttribute("src",  m_CalData.others[0].popup_image_space) ;
    imageSpacer7.setAttribute("border",0);
    imageSpacer7.setAttribute("width",1);
    imageSpacer7.setAttribute("height",1);

    var imageSpacer8 = $(document.createElement("img"));
    imageSpacer8.setAttribute("src",  m_CalData.others[0].popup_image_space) ;
    imageSpacer8.setAttribute("border",0);
    imageSpacer8.setAttribute("width",1);
    imageSpacer8.setAttribute("height",1);

    var imageSpacer9 = $(document.createElement("img"));
    imageSpacer9.setAttribute("src",  m_CalData.others[0].popup_image_space) ;
    imageSpacer9.setAttribute("border",0);
    imageSpacer9.setAttribute("width",1);
    imageSpacer9.setAttribute("height",1);

    var imageSpacer10 = $(document.createElement("img"));
    imageSpacer10.setAttribute("src",  m_CalData.others[0].popup_image_space) ;
    imageSpacer10.setAttribute("border",0);
    imageSpacer10.setAttribute("width",1);
    imageSpacer10.setAttribute("height",1);
    
    var popupDiv1 = $(document.createElement("div"));
    popupDiv1.addClassName("styles-popup-top-shadow");
    popupDiv1.appendChild(imageSpacer1);

    var popupDiv2 = $(document.createElement("div"));
    popupDiv2.addClassName("styles-popup-topleft-shadow");
    popupDiv2.appendChild(imageSpacer2);

    var popupDiv3 = $(document.createElement("div"));
    popupDiv3.addClassName("styles-popup-topright-shadow");
    popupDiv3.appendChild(imageSpacer3);
    //This is upto TOP

    var popupDiv4 = $(document.createElement("div"));
    popupDiv4.addClassName("styles-popup-bottomleft-shadow");
    popupDiv4.appendChild(imageSpacer4);

    var popupDiv5 = $(document.createElement("div"));
    popupDiv5.addClassName("styles-popup-bottomright-shadow");
    popupDiv5.appendChild(imageSpacer5);

    var popupDiv6 = $(document.createElement("div"));
    popupDiv6.addClassName("styles-popup-bottom-shadow");
    popupDiv6.appendChild(imageSpacer6);

    var popupDiv7 = $(document.createElement("div"));
    popupDiv7.addClassName("styles-bottom-arrow");
    if(harPos ==0)
	{
		popupDiv7.setStyle({paddingLeft:"60px"});
	}
    else if(harPos ==1)
	{
	if(this.m_page == 1){
        popupDiv7.setAttribute("align", "right");
		popupDiv7.setStyle({paddingRight:"60px"});
       }else
        popupDiv7.setAttribute("align", "center");
	}else
	{
		popupDiv7.setAttribute("align", "right");
		popupDiv7.setStyle({paddingRight:"60px"});
	}



    var popupDiv71 = $(document.createElement("div"));
    popupDiv71.addClassName("styles-bottom-arrow-img");
    popupDiv71.appendChild(imageSpacer7);
    popupDiv7.appendChild(popupDiv71);

    var popupTable = $(document.createElement("table"));
    popupTable.setAttribute("width", "100%");
    popupTable.setAttribute("border", "0");
    popupTable.setAttribute("cellSpacing", "0");
    popupTable.setAttribute("cellPadding", "0");

    var tableTr = $(popupTable.insertRow(-1));

    var tableTd1 = $(tableTr.insertCell(-1));
    tableTd1.addClassName("styles-popup-left-shadow");
    tableTd1.appendChild(imageSpacer8);

    var tableTd2 = $(tableTr.insertCell(-1));
    tableTd2.addClassName("styles-popup-content");


    var tableTd2h4 = $(document.createElement("h4"));
    var displayNameNode = document.createTextNode(m_CalData.styles[this.m_styleId].popup);
    tableTd2h4.appendChild(displayNameNode);
    tableTd2.appendChild(tableTd2h4);

    var subPopupBR = $(document.createElement("br"));
    subPopupBR.setStyle({clear:"both"});

    var tableTd3 = $(tableTr.insertCell(-1));
    tableTd3.addClassName("styles-popup-right-shadow");
    tableTd3.appendChild(imageSpacer9);

     var ImageUl;
    if(styleBackList!= null && styleBackList.length>0)
    {
      for(i=0; i<styleBackList.length; i++)
      {
        if(i > 11)
          break;

        if((i % 2) == 0)
        {
          if(i!=0)
          tableTd2.appendChild(ImageUl);
          ImageUl = $(document.createElement("ul"));
        }
        var ImageLi = $(document.createElement("li"));
        var imageTab = $(document.createElement("img"));
        imageTab.setAttribute("src",  m_CalData.backgrounds[styleBackList[i]].image0) ;
        imageTab.setAttribute("border",0);
        imageTab.setAttribute("width",72);
        imageTab.setAttribute("height",50);
        ImageLi.appendChild(imageTab);
        ImageUl.appendChild(ImageLi)
        if(styleBackList.length == 1)
          tableTd2.appendChild(ImageUl);

		if((styleBackList.length % 2) == 0 && ((styleBackList.length -1) == i) && i!= 0)
        {
	        var ImageLiTemp = $(document.createElement("li"));
	        ImageLiTemp.appendChild(imageSpacer10);
	        ImageUl.appendChild(ImageLiTemp);
	        tableTd2.appendChild(ImageUl);
	    }
	              
        if((i % 2) == 0 && ((styleBackList.length -1) == i) && i!= 0)
        {
	        var ImageLiTemp = $(document.createElement("li"));
	        ImageLiTemp.appendChild(imageSpacer10);
	        ImageUl.appendChild(ImageLiTemp);
	        tableTd2.appendChild(ImageUl);
	    }
      }
    }
    tableTd2.appendChild(subPopupBR);
    //alert(tableTd2.innerHTML);
    popupBckDiv.appendChild(popupDiv1);
    popupBckDiv.appendChild(popupDiv2);
    popupBckDiv.appendChild(popupDiv3);
    popupBckDiv.appendChild(popupTable);
    popupBckDiv.appendChild(popupDiv4);
    popupBckDiv.appendChild(popupDiv5);
    popupBckDiv.appendChild(popupDiv6);
    popupBckDiv.appendChild(popupDiv7);
    popupDisplayDiv.appendChild(popupBckDiv);
    popupDisplayDiv.style.width=popupWidth + "px";
    var x=document.getElementById("popupbackgrounddiv");
    if(x)
    {
      //TODO NEED TO WORK ON THIS
        $(this.m_div).innerHTML="";
    }
    $(this.m_div).style.top=displayTop+"px";
    $(this.m_div).style.left=displayLeft + "px";
    $(this.m_div).appendChild(popupDisplayDiv);
    return;
  }
});

/*
To display to Style backgrounds.  Need to work on this
                <div style="position:absolute;"><img src="/default/images/store/calendar/popup/mouse-top.png")%>" height="5" width="509"></div>
                <div class="mouse-main-bg" style="margin-top:5px;">
                    <div style="margin:11px 0px 8px 23px;font-family:Verdana;font-weight:bold;font-size:11px;color:#3399cc;">baby pink background designs<br /></div>
                    <div  style="margin-left:23px;">
                        <img src="/default/images/store/calendar/popup/small-img.gif")%>" width="72" height="50" class="thumbnail">
                    </div>
                </div>
                <div style="position:absolute;margin-top:160px;"><img src="/default/images/store/calendar/popup/mouse-bottom-center.png")%>" height="29" width="509"></div>

*/
var CPopupBackgroundsView = Class.create({
    initialize: function(div,styleId,sizeId,displayPos,page) {
        this.m_div = div;
        this.m_styleId = styleId;
        this.m_sizeId = sizeId;
        this.m_displayPos = displayPos;
        this.m_page = page;
    },
    subscribe : function(topicName)
    {
        //this.m_defaultCategory = defaultCategory ;
        CEventDispatcher.subscribe( topicName , this , this.renderPopupBackgrounds );

    } , // end of init
    renderPopupBackgrounds : function(pageDataObject)
    {
        var m_CalData = calAssets.getAssets() ;//.getAssets();
        var stlBack ;
        if(this.m_sizeId == -1)
        {

            var styleSizeList=m_CalData.styles[this.m_styleId].sizes;
            var styleSupSizesList= styleSizeList.split(",");
            var tempsizeId ;
            if(styleSupSizesList!= null && styleSupSizesList.length >0)
            {
                tempsizeId =styleSupSizesList[0];
                for(i=0; i<styleSupSizesList.length; i++)
                {
                    if(m_CalData.sizes[styleSupSizesList[i]].fid == '12x12')
                    {
                        tempsizeId=styleSupSizesList[i];
                        break;
                    }
                }
            }
        stlBack = eval("m_CalData.styles[" +  this.m_styleId + "].size_" + m_CalData.sizes[tempsizeId].fid);
        //stlBack = m_CalData.styles[this.m_styleId].background;
        }
        else
        {
          stlBack = eval("m_CalData.styles[" +  this.m_styleId + "].size_" + m_CalData.sizes[this.m_sizeId].fid);
        }

        styleBackList= stlBack.split(",");

        var popupBckDiv = $(document.createElement("div"));
        popupBckDiv.setAttribute("id", "popupbackgrounddiv");
        popupBckDiv.setStyle({top:"61px",left:"0px", width:"509px",position:"absolute"});

        var displayTop = 0;
        var displayLeft = 0;
        if(this.m_page == 1)
        {
          displayTop = 200;
        }else if(this.m_page == 2)
        {
          displayTop = 0;
        }
        var harPos = this.m_displayPos%3;
        var vertPos = Math.floor(this.m_displayPos/3);

        if(harPos == 0)
        {
            displayLeft = -20;

        }else  if(harPos == 1)
        {
            displayLeft = 105;
        }else  if(harPos == 2)
        {
            displayLeft = 230;
        }

        displayTop = displayTop + (vertPos * 180);

        var popupDiv1 = $(document.createElement("div"));
        popupDiv1.setStyle({position:"absolute"});

        var imageTab1 = document.createElement("img");
        imageTab1.setAttribute("src",  m_CalData.others[0].image_mouse_top) ;
        imageTab1.setAttribute("border",0);
        imageTab1.setAttribute("width",509);
        imageTab1.setAttribute("height",5);
        popupDiv1.appendChild(imageTab1);

        var popupDiv2 = $(document.createElement("div"));
        popupDiv2.addClassName("mouse-main-bg");
        popupDiv2.setStyle({marginTop:"5px"});

        var popupDiv21 = $(document.createElement("div"));
        popupDiv21.setStyle({margin:"11px 0px 8px 23px",fontFamily:"Verdana",fontWeight:"bold",fontSize:"11px", color:"#3399cc"});
        var displayNameNode = document.createTextNode(m_CalData.styles[this.m_styleId].popup);
        popupDiv21.appendChild(displayNameNode);
        var subPopupBR = document.createElement("br");
        popupDiv21.appendChild(subPopupBR);

        var popupDiv22 = $(document.createElement("div"));
        popupDiv22.setStyle({marginLeft:"23px"});

        if(styleBackList!= null && styleBackList.length>0)
        {
            for(i=0; i<styleBackList.length; i++)
            {
                if(i > 11)
                    break;
                var imageTab2 = $(document.createElement("img"));
                imageTab2.setAttribute("src",  m_CalData.backgrounds[styleBackList[i]].image0) ;
                imageTab2.setAttribute("border",0);
                imageTab2.setStyle({margin:"0px 5px 5px 0px"});
                imageTab2.setAttribute("width",72);
                imageTab2.setAttribute("height",50);
                imageTab2.addClassName("thumbnail");
                popupDiv22.appendChild(imageTab2);
            }
        }
        popupDiv2.appendChild(popupDiv21);
        popupDiv2.appendChild(popupDiv22);

        var popupDiv3 = $(document.createElement("div"));
        popupDiv3.setStyle({position:"absolute",marginTop:"160px"});

        var imageTab3 = document.createElement("img");
        imageTab3.setAttribute("src", m_CalData.others[0].image_mouse_bot) ;
        imageTab3.setAttribute("border",0);
        imageTab3.setAttribute("width",509);
        imageTab3.setAttribute("height",5);
        popupDiv3.appendChild(imageTab3);

        popupBckDiv.appendChild(popupDiv1);
        popupBckDiv.appendChild(popupDiv2);
        popupBckDiv.appendChild(popupDiv3);

        var x=document.getElementById("popupbackgrounddiv");
        if(x)
        {
            //TODO NEED TO WORK ON THIS
                $(this.m_div).innerHTML="";
        }
        $(this.m_div).style.top=displayTop+"px";
        $(this.m_div).style.left=displayLeft + "px";
        $(this.m_div).appendChild(popupBckDiv);
    return;
    }
});


/*
To display to Style backgrounds.  Need to work on this
*/
var CStyleHeadView = Class.create({
    initialize: function(div) {
        this.m_div = div;
    },
    subscribe : function(topicName)
    {
        //this.m_defaultCategory = defaultCategory ;
        CEventDispatcher.subscribe( topicName , this , this.renderStyleHead );

    } , // end of init
    renderStyleHead : function(pageDataObject)
    {
        var m_CalData = calAssets.getAssets() ;//.getAssets();
        var styleHeadDisplayDiv = document.createElement("div");
        styleHeadDisplayDiv.setAttribute("id", "styleheadDiv");

        var displayText = $(document.createElement("span"));
        displayText.addClassName("all-styles");
        //var textDisplayNameNode = document.createTextNode(m_CalData.others[0].shopby_style_text);
        var textDisplayNameNode = $(document.createElement("span"));  
        textDisplayNameNode.innerHTML = m_CalData.others[0].shopby_style_text;        
        
        displayText.appendChild(textDisplayNameNode);
        styleHeadDisplayDiv.appendChild(displayText);
        var x=document.getElementById("styleheadDiv");
        if(x)
        {
            //TODO NEED TO WORK ON THIS
                $(this.m_div).innerHTML="";
        }
    $(this.m_div).appendChild(styleHeadDisplayDiv);
    return;
    }
});

/*
To display to Style backgrounds.  Need to work on this
*/
var CSizeHeadView = Class.create({
    initialize: function(div) {
        this.m_div = div;
    },
    subscribe : function(topicName)
    {
        //this.m_defaultCategory = defaultCategory ;
        CEventDispatcher.subscribe( topicName , this , this.renderSizeHead );

    } , // end of init
    renderSizeHead : function(pageDataObject)
    {
        var m_CalData = calAssets.getAssets() ;//.getAssets();
        var styleHeadDisplayDiv = document.createElement("div");
        styleHeadDisplayDiv.setAttribute("id", "sizeheadDiv");

        var displayText = $(document.createElement("span"));
        displayText.addClassName("all-styles");
        var textDisplayNameNode = document.createTextNode(m_CalData.others[0].shopby_size_text);
        displayText.appendChild(textDisplayNameNode);
        styleHeadDisplayDiv.appendChild(displayText);
        var x=document.getElementById("sizeheadDiv");
        if(x)
        {
            //TODO NEED TO WORK ON THIS
                $(this.m_div).innerHTML="";
        }
    $(this.m_div).appendChild(styleHeadDisplayDiv);
    return;
    }
});

/*
To display to Style backgrounds.  Need to work on this
*/
var CGetStyleSizeDetails = Class.create({
    initialize: function(styleId) {
        this.m_Styleid = styleId;
    },
    subscribe : function(topicName)
    {
        //this.m_defaultCategory = defaultCategory ;
        CEventDispatcher.subscribe( topicName , this , this.getSizeID );

    } , // end of init
    getSizeID : function(pageDataObject)
    {
        var m_CalData = calAssets.getAssets() ;//.getAssets();
        var styleSupSizes = m_CalData.styles[this.m_Styleid].sizes;
        var styleSupSizesList= styleSupSizes.split(",");
        return styleSupSizesList[0];
    }
});

/*
To display to Style backgrounds.  Need to work on this
<div class="small-image"><img src="/default/images/calendars/small.jpg" )
%>" width="72" height="50" border="0" />
*/
var CStyleBackgroundsDisplayView = Class.create({
    initialize: function(div,styleId,sizeId) {
        this.m_div = div;
        this.m_styleId = styleId;
        this.m_sizeId = sizeId;
    },
    subscribe : function(topicName)
    {
        //this.m_defaultCategory = defaultCategory ;
        CEventDispatcher.subscribe( topicName , this , this.renderPopupBackgrounds );

    } , // end of init
    renderStyleBackgrounds: function(pageDataObject)
    {
        var m_CalData = calAssets.getAssets() ;//.getAssets();
        var stlBack = m_CalData.styles[this.m_styleId].background;
        if(this.m_sizeId == -1)
        {

            var styleSizeList=m_CalData.styles[this.m_styleId].sizes;
            var styleSupSizesList= styleSizeList.split(",");
            var tempsizeId ;
            if(styleSupSizesList!= null && styleSupSizesList.length >0)
            {
                tempsizeId =styleSupSizesList[0];
                for(i=0; i<styleSupSizesList.length; i++)
                {
                    if(m_CalData.sizes[styleSupSizesList[i]].fid == '12x12')
                    {
                        tempsizeId=styleSupSizesList[i];
                        break;
                    }
                }
            }
          stlBack = eval("m_CalData.styles[" +  this.m_styleId + "].size_" + m_CalData.sizes[tempsizeId].fid);
        //stlBack = m_CalData.styles[this.m_styleId].background;
        }
        else
        {
          stlBack = eval("m_CalData.styles[" +  this.m_styleId + "].size_" + m_CalData.sizes[this.m_sizeId].fid);
        }
        var styleBackList= stlBack.split(",");

        var styleBackDisplayDiv = document.createElement("div");
        styleBackDisplayDiv.setAttribute("id", "stylebackDiv");

        var displayText = $(document.createElement("span"));
        displayText.addClassName("elegant");
        var textDisplayNameNode = document.createTextNode(m_CalData.styles[this.m_styleId].popup);
        displayText.appendChild(textDisplayNameNode);

        var backImageDiv = $(document.createElement("div"));
        backImageDiv.addClassName("small-image");

        if(styleBackList!= null && styleBackList.length>0)
        {
          for(i=0; i<styleBackList.length; i++)
          {
            var imageTab = $(document.createElement("img"));
            imageTab.setAttribute("src",  m_CalData.backgrounds[styleBackList[i]].image0) ;
            imageTab.setAttribute("border",0);
            imageTab.setAttribute("width",72);
            imageTab.addClassName("small-random");
            imageTab.setAttribute("height",50);
            backImageDiv.appendChild(imageTab);
          }
        }
        styleBackDisplayDiv.appendChild(displayText);
        styleBackDisplayDiv.appendChild(backImageDiv);
        var x=document.getElementById("stylebackDiv");
        if(x)
        {
            //TODO NEED TO WORK ON THIS
                $(this.m_div).innerHTML="";
        }
    $(this.m_div).appendChild(styleBackDisplayDiv);
    return;
    }
});


/*
To display to Style backgrounds.  Need to work on this
<div class="small-image"><img src="/default/images/calendars/small.jpg" )
%>" width="72" height="50" border="0" />
*/
var CStyleMainImageDisplayView = Class.create({
    initialize: function(div,styleId,sizeId) {
        this.m_div = div;
        this.m_styleId = styleId;
        this.m_sizeId = sizeId;
    },
    subscribe : function(topicName)
    {
        //this.m_defaultCategory = defaultCategory ;
        CEventDispatcher.subscribe( topicName , this , this.renderStyleMainImage );

    } , // end of init
    renderStyleMainImage: function(pageDataObject)
    {
      var m_CalData = calAssets.getAssets() ;//.getAssets();
      var imageTab = $(document.createElement("img"));
      var styleSupSizes = m_CalData.styles[this.m_styleId].sizes;
      var styleSupSizesList= styleSupSizes.split(",");
      var szId = this.m_sizeId;
      if(szId == -1)
      {
       szId = styleSupSizesList[0];
      }
      imageTab.setAttribute("src",  eval('m_CalData.styles['+ this.m_styleId + '].' +  m_CalData.styles[this.m_styleId].fid + '_' + m_CalData.sizes[szId].fid)) ;
      if(m_CalData.sizes[szId].fid == '12x12')
      {
        imageTab.setAttribute("width",378);
        imageTab.setAttribute("height",378);
      }
      else
      {
        imageTab.setAttribute("width",484);
        imageTab.setAttribute("height",378);
      }

      $(this.m_div).innerHTML="";
      $(this.m_div).appendChild(imageTab);
      return;
    }
});


/*
To display to Style main content
                <div class="green-header"><%=resBundle.getMessage("page3_green_heading1") %></div>
                <div class="text"><%=resBundle.getMessage("page3_green_content") %></div>
*/
var CStyleMainContentDisplayView = Class.create({
    initialize: function(div,styleId) {
        this.m_div = div;
        this.m_styleId = styleId;
    },
    subscribe : function(topicName)
    {
        //this.m_defaultCategory = defaultCategory ;
        CEventDispatcher.subscribe( topicName , this , this.renderStyleMainContent );

    } , // end of init
    renderStyleMainContent: function(pageDataObject)
    {
        var m_CalData = calAssets.getAssets() ;//.getAssets();
        var headerDIV = $(document.createElement("div"));
        headerDIV.addClassName("green-header");
        var textStyleHeaderNode = document.createTextNode(m_CalData.styles[this.m_styleId].stylehead);
        headerDIV.appendChild(textStyleHeaderNode);

        var headerContentDIV = $(document.createElement("div"));
        headerContentDIV.addClassName("text");
        var textStyleContentNode = document.createTextNode(m_CalData.styles[this.m_styleId].styleheadcont);
        headerContentDIV.appendChild(textStyleContentNode);

        $(this.m_div).innerHTML="";
        $(this.m_div).appendChild(headerDIV);
        $(this.m_div).appendChild(headerContentDIV);
        return;
    }
});

/*
To display to Style backgrounds.  Need to work on this
<div><span class="size-lable"><%=resBundle.getMessage("photos") %></span><span class="text"><%=resBundle.getMessage("upto_36") %></span><span class="links"> <a href="javascript:sendUpload()" ><%=resBundle.getMessage("upload") %></a></span></div>
<div style="margin-top:4px;">
<span   class="lable">size</span><span class="text" id="calsize">11 1/8" w x 8" h</span> <span class="links"><a href="javascript:expandSize()">change</a></span></div>
<div style="margin-top:4px;"><span class="lable1">style</span><span class="text" id="calstyle">Pink Baby</span> <span class="links"><a href="javascript:changeStyleSelection(2)">change</a></span></div>
*/
var CStyleSizeSelectedDisplayView = Class.create({
    initialize: function(div,styleId,sizeId) {
        this.m_div = div;
        this.m_styleId = styleId;
        this.m_sizeId = sizeId;
    },
    subscribe : function(topicName)
    {
        //this.m_defaultCategory = defaultCategory ;
        CEventDispatcher.subscribe( topicName , this , this.renderSelectedStyleSize );

    } , // end of init
    renderSelectedStyleSize: function(pageDataObject)
    {
        var m_CalData = calAssets.getAssets() ;//.getAssets();
        var szId = this.m_sizeId;
        if(szId == -1)
        {
            var styleSupSizes = m_CalData.styles[this.m_styleId].sizes;
            var styleSupSizesList= styleSupSizes.split(",");
            szId = styleSupSizesList[0];
        }
        var styleSizeDisplayDiv = document.createElement("div");
        styleSizeDisplayDiv.setAttribute("id", "styleSelDiv");

        var div3 = $(document.createElement("div"));

        var span1div3 = $(document.createElement("span"));
        span1div3.addClassName( "size-lable");
        var textDisplayNameNode31 = document.createTextNode(m_CalData.others[0].photos_disp_text);
        span1div3.appendChild(textDisplayNameNode31);

        var span2div3 = $(document.createElement("span"));
        span2div3.addClassName("text");
        var textDisplayNameNode32 = document.createTextNode(m_CalData.styles[this.m_styleId].photos_support_text);
        span2div3.appendChild(textDisplayNameNode32);

        var span3div3 = $(document.createElement("span"));
        span3div3.addClassName("links");


        var anchorTag31 = document.createElement("a");
        anchorTag31.setAttribute("href" , "javascript:sendUpload()");

        var textDisplayNameNode33 = document.createTextNode(m_CalData.others[0].upload_text);
        anchorTag31.appendChild(textDisplayNameNode33);
        span3div3.appendChild(anchorTag31);

        div3.appendChild(span1div3);
        div3.appendChild(span2div3);
        div3.appendChild(span3div3);

        var div1 = $(document.createElement("div"));
        div1.setStyle({marginTop:"4px"});

       //Removed the code as per Bug ID:SNF0014712

        var div2 = $(document.createElement("div"));
        div2.setStyle({marginTop:"4px"});

        var span1Div2 = $(document.createElement("span"));
        span1Div2.addClassName("lable1");
        var textDisplayNameNode4 = document.createTextNode(m_CalData.others[0].style_disp_text);
        span1Div2.appendChild(textDisplayNameNode4);

        var span2Div2 = $(document.createElement("span"));
        span2Div2.addClassName("text");
        var textDisplayNameNode5 = document.createTextNode(m_CalData.styles[this.m_styleId].name);
        span2Div2.appendChild(textDisplayNameNode5);

        var span3Div2 = $(document.createElement("span"));
        span3Div2.addClassName("links");

        var anchorTag2 = document.createElement("a");
        anchorTag2.setAttribute("href" , "javascript:changeStyleSelection(2)");
        
        var textDisplayNameNode6 = document.createTextNode(m_CalData.others[0].style_change_text);
        anchorTag2.appendChild(textDisplayNameNode6);
        span3Div2.appendChild(anchorTag2);

        div2.appendChild(span1Div2);
        div2.appendChild(span2Div2);
        div2.appendChild(span3Div2);

        styleSizeDisplayDiv.appendChild(div3);
        styleSizeDisplayDiv.appendChild(div1);
        styleSizeDisplayDiv.appendChild(div2);


        var x=document.getElementById("styleSelDiv");
        if(x)
        {
            //TODO NEED TO WORK ON THIS
                $(this.m_div).innerHTML="";
        }
    $(this.m_div).appendChild(styleSizeDisplayDiv);
    return;
    }
});


/*
To display to select size.
<div><img src="/default/images/calendars/popup/calendar-main.gif" width="327" height="257" id="sizeimage" /></div>
    <img src="/default/images/calendars/popup/spacer.gif" width="1" height="9" />
    <div  id="text1" class="green-header-bg">8.5" x 11" classic calendar</div>
    <img src="/default/images/calendars/popup/spacer.gif" width="1" height="9" />
    <div class="grey-main-content"><span id="text2">f fd fdfsd</span>
        <ul><li><span id="text3">sdgsg</span></li>
        <img src="/default/images/calendars/popup/spacer.gif" width="1" height="8" />
        <li><span id="text4">sdgsg</span></li>
        <img src="/default/images/calendars/popup/spacer.gif" width="1" height="8" />
        <li><span id="text5">sdgsg</span></li></ul>
</div>
*/
var CSizeSelectedDisplayView = Class.create({
    initialize: function(div,sizeId,styleId) {
        this.m_div = div;
        this.m_sizeId = sizeId;
        this.m_styleId = styleId;
    },
    subscribe : function(topicName)
    {
        //this.m_defaultCategory = defaultCategory ;
        CEventDispatcher.subscribe( topicName , this , this.renderSizeSelectionDisplay );

    } , // end of init
    renderSizeSelectionDisplay : function(pageDataObject)
    {
        var m_CalData1 = calAssets.getAssets() ;//.getAssets();
        var sizeContentDisplayDiv = document.createElement("div");
        sizeContentDisplayDiv.setAttribute("id", "sizeSelectionDisplayDiv");

        var szId = this.m_sizeId;
        if(szId == -1)
        {
          var styleSupSizes = m_CalData1.styles[this.m_styleId].sizes;
          var styleSupSizesList= styleSupSizes.split(",");
          szId = styleSupSizesList[0];
        }

  //Need to add selected functionality


        var popupDiv1 = document.createElement("div");
        var imageTab1 = document.createElement("img");

        //eval('m_CalData1.styles['+ this.m_styleId + '].popup_' +  m_CalData1.styles[this.m_styleId].fid + '_' + m_CalData1.sizes[szId].fid)
        imageTab1.setAttribute("src", m_CalData1.sizes[szId].image2) ;
        imageTab1.setAttribute("border",0);
        imageTab1.setAttribute("width",327);
        imageTab1.setAttribute("height",256);
        popupDiv1.appendChild(imageTab1);

        var imageTab2 = document.createElement("img");
        imageTab2.setAttribute("src",  m_CalData1.others[0].popup_image_space) ;
        imageTab2.setAttribute("border",0);
        imageTab2.setAttribute("width",1);
        imageTab2.setAttribute("height",8);

        var imageTab3 = document.createElement("img");
        imageTab3.setAttribute("src", m_CalData1.others[0].popup_image_space) ;
        imageTab3.setAttribute("border",0);
        imageTab3.setAttribute("width",1);
        imageTab3.setAttribute("height",8);

        var popupDiv2 = $(document.createElement("div"));
          popupDiv2.addClassName("green-header-bg");
        var textDisplayNameNode1 = document.createTextNode(m_CalData1.sizes[szId].text1);
        popupDiv2.appendChild(textDisplayNameNode1);


        var popupDiv3 = $(document.createElement("div"));
          popupDiv3.addClassName("grey-main-content");
          var popupSpan2 = document.createElement("span");
        var textDisplayNameNode2 = document.createTextNode(m_CalData1.sizes[szId].text2);
        popupSpan2.appendChild(textDisplayNameNode2);

        var popupULTag = document.createElement("ul");

        var popupLiTag1 = document.createElement("li");
        var textDisplayNameNode3 = document.createTextNode(m_CalData1.sizes[szId].text3);
        popupLiTag1.appendChild(textDisplayNameNode3);

        var popupLiTag2 = document.createElement("li");
        var textDisplayNameNode4 = document.createTextNode(m_CalData1.sizes[szId].text4);
        popupLiTag2.appendChild(textDisplayNameNode4);

        var popupLiTag3 = document.createElement("li");
        var textDisplayNameNode5 = document.createTextNode(m_CalData1.sizes[szId].text5);
        popupLiTag3.appendChild(textDisplayNameNode5);

        popupULTag.appendChild(popupLiTag1);
        popupULTag.appendChild(imageTab2);
        popupULTag.appendChild(popupLiTag2);
        popupULTag.appendChild(imageTab3);
        popupULTag.appendChild(popupLiTag3);

        popupDiv3.appendChild(popupSpan2)
        popupDiv3.appendChild(popupULTag);

        var imageTab4 = document.createElement("img");
        imageTab4.setAttribute("src", m_CalData1.others[0].popup_image_space) ;
        imageTab4.setAttribute("border",0);
        imageTab4.setAttribute("width",1);
        imageTab4.setAttribute("height",7);

        var imageTab5 = document.createElement("img");
        imageTab5.setAttribute("src", m_CalData1.others[0].popup_image_space) ;
        imageTab5.setAttribute("border",0);
        imageTab5.setAttribute("width",1);
        imageTab5.setAttribute("height",7);

        sizeContentDisplayDiv.appendChild(popupDiv1);
        sizeContentDisplayDiv.appendChild(imageTab4);
        sizeContentDisplayDiv.appendChild(popupDiv2);
        sizeContentDisplayDiv.appendChild(imageTab5);
        sizeContentDisplayDiv.appendChild(popupDiv3);

        var x=document.getElementById("sizeSelectionDisplayDiv");
        if(x)
        {
            //TODO NEED TO WORK ON THIS
                $(this.m_div).innerHTML="";
        }
    $(this.m_div).appendChild(sizeContentDisplayDiv);
    return;
    }
});

/*
To display to select size dropdown.
*/
 var CSizeSectionOption = Class.create({
        initialize: function(div,sizeId,styleId) {
        this.m_div = div;
		this.m_sizeId = sizeId;
		this.m_styleId = styleId;
		//this.m_sizeSelOption = sizeSelOption;
    },
    subscribe : function(topicName)
    {
        //this.m_defaultCategory = defaultCategory ;
        CEventDispatcher.subscribe( topicName , this , this.renderSizes );

    } , // end of init
    renderOptionSizes : function(pageDataObject)
    {
		var m_CalData = calAssets.getAssets() ;//.getAssets();
		var szId = this.m_sizeId;
		var userSelOption = 0;
        var sizeDiv = document.createElement("div");
        sizeDiv.setAttribute("id", "sizeOptionsId");
        sizeDiv.style.paddingTop = "2px";
        occSizeList= m_CalData.sizes.length;
	
		if (m_CalData.sizes[this.m_sizeId].fid == "11x14")
		{
			document.getElementById("hideText").style.visibility="visible";
		}
		else
		{
			document.getElementById("hideText").style.visibility="hidden";
		}
        if(occSizeList!= null && occSizeList >0)
        {
			var sizeOptionsDiv = document.createElement("div");
			var objSelect = $(document.createElement("SELECT"));
            for(i=0; i<occSizeList; i++)
            {
				var objOption = $(document.createElement("OPTION"));
				var headerDisplayNameNode = document.createTextNode(m_CalData.sizes[i].fid );
				objOption.value = i;
				objOption.text = m_CalData.sizes[i].text1;

				objSelect.options.add(objOption);
				if(i==this.m_sizeId){
				 objSelect.options[i].selected = "selected";
				}
				
				Event.observe(objSelect, 'change', function(){
					userSelOption = onSizeSelection(this);
					if (m_CalData.sizes[userSelOption].fid == "11x14")
					{
						document.getElementById("hideText").style.visibility="visible";
					}
					else
					{
						document.getElementById("hideText").style.visibility="hidden";
					}
				});
                sizeOptionsDiv.appendChild(objSelect);
				sizeDiv.appendChild(sizeOptionsDiv);
            }
        }
        var x=document.getElementById("sizeOptionsId");
        if(x)
        {
            //TODO NEED TO WORK ON THIS
            $(this.m_div).innerHTML="";
        }
    $(this.m_div).appendChild(sizeDiv);
	return;
    }
});
/////////////////////////////////////CCalendarAssetsDataComponent   ///////////////////////

var CCalendarAssetsDataComponent = Class.create({
    //m_url : undefined ,
    initialize: function(url, topicName) {
        this.m_url = url;
        this.topicName = topicName ;
    },
    subscribe :function(_topicName)
    {
        CEventDispatcher.subscribe(this.topicName, this , this.load );
    } ,
    load :  function()
    {
      if(typeof(loadDataFromDataHost) != "function") throw "util method  loadDataFromDataHost is not defined!" ;
        var jsonData = loadDataFromDataHost(null, this);

    } ,
    setUrl : function (url)
    {
      this.m_url = url;
    } ,
    getReadUrl : function ()
    {
      return this.m_url ;
    } ,
    callbackDataHandler : function (dataObject)
    {
        if(typeof(CEventDispatcher) != "object") throw  "please include clientv2.js!" ;
        calAssets.fillData(dataObject);
        // now publish the call back to occasion tree view component
        console.debug("CCalendarAssetsDataComponent : publish ");
        CEventDispatcher.publish(this.topicName , calAssets );
        setPage();
    }
});//   end of function