//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("calendar_body_container").className="body-container-withoutbg";
          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);
          (new CShopSizeViewSection('shopbysizenew')).renderShopSizes(data);          
          
          if(!fistOmniReq)
          trackPageNames('Store', ':Calendar');
          document.body.scrollTop = 0;
          document.body.scrollLeft = 0;*/
          var lm = CLinkManager.getInstance( "/photo-calendars" );
          document.location.href = lm.getURL() ;
      }
      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("calendar_body_container").className="body-container-withoutbg";
          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);
          trackPageNames('store',': calendars: styles' );
          document.body.scrollTop = 0;
          document.body.scrollLeft = 0;
          renderShopCalendarText(userSelectedSize);          
            
      }
      else
      {
          if(calAssets.getSize() != null && calAssets.getStyle() != null)
          {
              userSelectedSize = getCalendarSizeId(calAssets.getSize());
              userSelectedStyle = getCalendarStyleId(calAssets.getStyle());
              calAssets.setSize(null);
              calAssets.setStyle(null);
          }
		  document.getElementById("calendar_body_container").className="body-container-withoutbg";
          document.getElementById("page1").style.display = "none";
          document.getElementById("page2").style.display = "none";
          document.getElementById("page3").style.display = "block";
          
          (new CStyleMainContentDisplayView('styletextcontent',userSelectedStyle)).renderStyleMainContent(data);
          if (isUKWebsite == "false"){
          (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 CNewSizeSectionOption('changeSizes',userSelectedSize,userSelectedStyle)).renderNewSizes(data);	
             trackPageVars();
             trackPageNames('store',': calendars: product details' );
          }
		  //(new CSizeSectionOption('changeSizes',userSelectedSize,userSelectedStyle)).renderOptionSizes(data);
		  (new CNewSizeSectionOption('changeSizes',userSelectedSize,userSelectedStyle)).renderNewSizes(data);		  
          document.body.scrollTop = 0;
          document.body.scrollLeft = 0;
      }
      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 showSelectedSize(sizeDivId,selectedSizeId,mOverSizeId,operation)
{
	if(userSelectedSize != mOverSizeId)
	{
		if(operation == 'over')
		{
			document.getElementById("eachsizediv"+ mOverSizeId).className="calendars-sizes-onmouseover";
		}else
		{ 
			document.getElementById("eachsizediv"+ mOverSizeId).className="calendars-sizes";
		}
	}else
	{
		document.getElementById("eachsizediv"+ userSelectedSize).className="calendars-sizes-selected";
	}
}

function displaySelectedSize(sizeDivId,sizeSel)
{

	if(userSelectedSize != sizeSel)
	{
		userSelectedSize = sizeSel;
		showSizePriceDetails();
		new CStyleMainImageDisplayView('stylemaindisplayimage',userSelectedStyle,userSelectedSize).renderStyleMainImage(data);
	}  
	var clAssets = calAssets.getAssets();
	
	if (clAssets.sizes[userSelectedSize].fid == "11x14")
	{
		document.getElementById("hideText").style.visibility="visible";
	}
	else
	{
		document.getElementById("hideText").style.visibility="hidden";
	}
	
	for(i=0;i<clAssets.sizes.length;i++)
	{
		if(sizeSel == i)
        {
            if ( document.getElementById(sizeDivId) != null)
                document.getElementById(sizeDivId).className="calendars-sizes-selected";
        }else
        {
            if (document.getElementById("eachsizediv"+i) != null)
                document.getElementById("eachsizediv"+i).className="calendars-sizes";
        }
	} 
}

function showSizePriceDetails()
{

	var m_CalData = calAssets.getAssets();
	var sizeSpanText = document.getElementById("sizespandisplayprice");
	sizeSpanText.innerHTML ="";
	var sizeSpanTextNode = document.createTextNode(m_CalData.others[0].calendar_size);
	sizeSpanText.appendChild(sizeSpanTextNode);
	
	var displaySize = document.createTextNode(" " + m_CalData.sizes[userSelectedSize].shop_size_text );
	var displaySizeBld = $(document.createElement("b"));
	displaySizeBld.appendChild(displaySize);               
	sizeSpanText.appendChild(displaySizeBld);
	
	var displayStartAt = document.createTextNode(  " " + m_CalData.others[0].starting_at + " ");
	sizeSpanText.appendChild(displayStartAt);
	
	var monthsSupNewPrice= m_CalData.sizes[userSelectedSize].months.price_new;   
	var monthsSup = m_CalData.sizes[userSelectedSize].months.supported.split(",");
    var index = 0;
    if(m_CalData.styles[userSelectedStyle].premiumid == m_CalData.styles[userSelectedStyle].fid){
        monthsSupNewPrice = m_CalData.licensedStyle[userSelectedStyle].months.premium_price;
         index=(userSelectedSize*(monthsSup.length))+parseInt(monthOptionSelected);
    }
	var monthSuppListNewPrice= monthsSupNewPrice.split(",");                
	var monthsSupPrice= m_CalData.sizes[userSelectedSize].months.price;                               
	var monthSuppListPrice= monthsSupPrice.split(",");
	             
	var priceTagDisplay = $(document.createElement("span"));  
	if(index > 0)
	priceTagDisplay.innerHTML = monthSuppListNewPrice[index];   
	else
	priceTagDisplay.innerHTML = monthSuppListNewPrice[monthOptionSelected];   
	sizeSpanText.appendChild(priceTagDisplay);
	var sizeSpanBR1 = $(document.createElement("br"));
	sizeSpanText.appendChild(sizeSpanBR1);
	var sizeSpanBR2 = $(document.createElement("br"));
	sizeSpanText.appendChild(sizeSpanBR2);		
}

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 resizeFrame() {
    if(document.getElementById("greyout"))
    {
       isScrollHeightSet = true;
       document.getElementById("greyout").style.height= "100%";
       document.getElementById("greyout").style.width= "100%";
    }
}

function pickupMoreInfo()
{
    setWindowProperties('scrollbars=yes,width=600,height=600,resizable=no');
    openWindow('/pickupmoreinfo');
}

/* 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 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;
    showSizePriceDetails();
  }
  
  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;
	  var m_CalData1 = calAssets.getAssets() ;//.getAssets();

	  var styleTitleId = "styleTitleId"+stylePos;
	  var topLeft = "topLeft"+stylePos;
	  var topRight = "topRight"+stylePos;
	  var btmLeft = "btmLeft"+stylePos;
	  var btmRight = "btmRight"+stylePos;

	  var allStyleId = "allStyleId"+stylePos;
	  var allTopLeft = "allTopLeft"+stylePos;
	  var allTopRight = "allTopRight"+stylePos;
	  var allBtmLeft = "allBtmLeft"+stylePos;
	  var allBtmRight = "allBtmRight"+stylePos;

      if(pram=='out')
      {
        clearTimeout(timeOutFunction);
        document.getElementById('backgroundpopupdiv').style.display = 'none';
		if (page == 1)
		{
			document.getElementById(''+styleTitleId+'').className = "seasonal";	document.getElementById(''+topLeft+'').src = m_CalData1.others[0].image_top_left;		document.getElementById(''+topRight+'').src = m_CalData1.others[0].image_top_right;		document.getElementById(''+btmLeft+'').src = m_CalData1.others[0].image_bot_left;		document.getElementById(''+btmRight+'').src = m_CalData1.others[0].image_bot_right;
		}
		else if(page == 2)
		{
			document.getElementById(''+allStyleId+'').className = "seasonal";	document.getElementById(''+allTopLeft+'').src = m_CalData1.others[0].image_top_left;		document.getElementById(''+allTopRight+'').src = m_CalData1.others[0].image_top_right;		document.getElementById(''+allBtmLeft+'').src = m_CalData1.others[0].image_bot_left;		document.getElementById(''+allBtmRight+'').src = m_CalData1.others[0].image_bot_right;
		}
      }
      else
      {

        timeOutFunction = setTimeout("displayBackgrounds(tempstyleid,tempstylePos,temppram)",250);
		if (page == 1)
		{
			document.getElementById(''+styleTitleId+'').className = "seasonal2";	document.getElementById(''+topLeft+'').src = m_CalData1.others[0].image_top_left_orange;		document.getElementById(''+topRight+'').src = m_CalData1.others[0].image_top_right_orange;		document.getElementById(''+btmLeft+'').src = m_CalData1.others[0].image_bot_left_orange;		document.getElementById(''+btmRight+'').src = m_CalData1.others[0].image_bot_right_orange;
		}
		else if(page == 2)
		{
			document.getElementById(''+allStyleId+'').className = "seasonal2";	document.getElementById(''+allTopLeft+'').src = m_CalData1.others[0].image_top_left_orange;		document.getElementById(''+allTopRight+'').src = m_CalData1.others[0].image_top_right_orange;		document.getElementById(''+allBtmLeft+'').src = m_CalData1.others[0].image_bot_left_orange;		document.getElementById(''+allBtmRight+'').src = m_CalData1.others[0].image_bot_right_orange;
		}
      }
  }

  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(",");
        var isSeeallLoaded = false;
        if(occStylesList!= null && occStylesList.length>0)
        {
          	for(i=0; i<occStylesList.length; )
      		{
      		
		        if(i > 4)
		        {
		          break;
		        }
		
				if( !isSeeallLoaded &&  i==0)
				{
					i = (occStylesList.length -1);
					isSeeallLoaded = true;
				}
		        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");
				stlTitle.setAttribute("id", "styleTitleId"+i);

                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)");
                    Event.observe(anchorTag, 'click', function(){
                        trackMainArea( this ,'style_tile6_allstyles');
                    });
                }
                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(",");
                        trackMainArea( this ,'style_tile' + argPassedList[2]);
                    });
                }
                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.setAttribute("id", "topLeft"+i);
                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.setAttribute("id", "topRight"+i);
                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.setAttribute("id", "btmLeft"+i);
                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.setAttribute("id", "btmRight"+i);
                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);
                
                if(isSeeallLoaded)
                { 
                	if(i == (occStylesList.length -1))
	                	i = -1;
                }
                i = i+1;
            }
        }
        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");
				stlTitle.setAttribute("id", "allStyleId"+i);

                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(",");
                    trackMainArea( this ,'style_tile' + argPassedList[2]);
                });
                        //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.setAttribute("id", "allTopLeft"+i);
                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.setAttribute("id", "allTopRight"+i);
                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.setAttribute("id", "allBtmLeft"+i);
                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.setAttribute("id", "allBtmRight"+i);
                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');
                    trackMainArea( this ,' size_' + argPassed);
                });
				var imageTitle;
				if (m_CalData.sizes[i].fid == '12x12')
				{
					imageTitle = "create a " +m_CalData.sizes[i].name;
				}else{
					imageTitle = "create an " +m_CalData.sizes[i].name;
				}
                var imageTab = document.createElement("img");
                imageTab.setAttribute("src", m_CalData.sizes[i].image0) ;
				imageTab.setAttribute("title", imageTitle) ;
                anchorTag.appendChild(imageTab);
				imageDiv.appendChild(anchorTag);               
				
                var footerDiv = $(document.createElement("div"));
                footerDiv.addClassName("seasonal-background");

                var monthsSupPrice= m_CalData.sizes[i].months.price;
                var monthsSupNewPrice= m_CalData.sizes[i].months.price_new;   

                var monthSuppListPrice= monthsSupPrice.split(",");
                var monthSuppListNewPrice= monthsSupNewPrice.split(",");                

                //var footrDisplayNameNode = document.createTextNode(monthSuppListNewPrice[0]);

                footerDiv.innerHTML = monthSuppListNewPrice[0]
                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") ;

				if ((m_CalData.sizes[i].fid == "12x12" ) && (m_CalData.others[0].is_pickup_available == true))
				{
					var anchorPickup = document.createElement("a");
					anchorPickup.setAttribute("href" , "javascript:pickupMoreInfo()");
					var imagePickup = $(document.createElement("img"));
					imagePickup.addClassName("pickup") ;
					imagePickup.setAttribute("src", m_CalData.others[0].image_pickup) ;
					imagePickup.setAttribute("width", "50") ;
					imagePickup.setAttribute("height", "26") ;
					anchorPickup.appendChild(imagePickup);
				}

                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);
				if ((m_CalData.sizes[i].fid == "12x12" ) && (m_CalData.others[0].is_pickup_available == true))
				{
					eachSizeDiv.appendChild(anchorPickup);
				}
                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 Calendar size view section.
*/

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

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

        var m_CalDat = calAssets.getAssets() ;//.getAssets();
        
        
        var shopSizeDiv = $(document.createElement("div"));
		shopSizeDiv.addClassName("shopbysize-panel");
		
		var imageTopDiv = $(document.createElement("div"));
		var imageTop = $(document.createElement("img"));
		imageTop.setAttribute("src", m_CalDat.others[0].shopbysize_bule_top) ;
		imageTopDiv.appendChild(imageTop);
		
		var imageBotDiv = $(document.createElement("div"));
		var imageBot = $(document.createElement("img"));
		imageBot.setAttribute("src", m_CalDat.others[0].shopbysize_bule_btm) ;                            
		imageBotDiv.appendChild(imageBot);
		            
		           
		var shopContDiv = $(document.createElement("div"));
		shopContDiv.addClassName("white-panel");
		                 
		var shpBySize = $(document.createElement("span"));
		shpBySize.addClassName("shopbysize-panel-title");
		var shpBySizeNameNode = document.createTextNode(m_CalDat.others[0].shop_by_size);
		shpBySize.appendChild(shpBySizeNameNode);
		
		shopContDiv.appendChild(shpBySize);
		
		var shopbysizePanelLinks = $(document.createElement("div"));
		shopbysizePanelLinks.addClassName("shopbysize-panel-links");
	 
        occSizeList= m_CalDat.sizes.length;
        if(occSizeList!= null && occSizeList >0)
        {
            for(i=0; i<occSizeList; i++)
            {

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

               var displaySize = document.createTextNode(m_CalDat.sizes[i].shop_size_text );
               var displayStartAt = document.createTextNode(  " " + m_CalDat.others[0].starting_at + " ");
               anchorTag.appendChild(displaySize);
               shopbysizePanelLinks.appendChild(anchorTag);
               shopbysizePanelLinks.appendChild(displayStartAt);
               
               var monthsSupNewPrice= m_CalDat.sizes[i].months.price_new;                               
               var monthSuppListNewPrice= monthsSupNewPrice.split(",");                
               var monthsSupPrice= m_CalDat.sizes[i].months.price;     
               var monthSuppListPrice= monthsSupPrice.split(",");   
                              
               //var priceTagDisplay = document.createTextNode(monthSuppListNewPrice[0]); 
			   var priceTagDisplay = $(document.createElement("span"));  
			   priceTagDisplay.innerHTML = monthSuppListPrice[0]; //this they use in page1 price;
               shopbysizePanelLinks.appendChild(priceTagDisplay);    
                                          
               var breakDiv = $(document.createElement("br"));               
               shopbysizePanelLinks.appendChild(breakDiv);
            }
        }
        shopContDiv.appendChild(shopbysizePanelLinks);
        
        shopSizeDiv.appendChild(imageTopDiv);
        shopSizeDiv.appendChild(shopContDiv);
        shopSizeDiv.appendChild(imageBotDiv);   
      
       $(this.m_div).innerHTML="";
       
    $(this.m_div).appendChild(shopSizeDiv);
    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;
        monthsSupNewPrice= m_CalData1.sizes[szId].months.price_new;
        
        monthSuppList= monthsSup.split(",");
        monthSuppListPrice= monthsSupPrice.split(",");
        monthSuppListNewPrice= monthsSupNewPrice.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);
                        trackMainArea( this ,'radiobutton_' + argPassed);
                    });
                }
                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);
                        trackMainArea( this ,'radiobutton_' + argPassed);
                  });

                  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 priceDisplayNameNode = document.createTextNode(monthSuppListPrice[i]);
            //priceDiv.appendChild(priceDisplayNameNode);

			priceDiv.innerHTML = monthSuppListPrice[i];
            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');
            trackMainArea( this ,'select_size_' + argPassed);
        });

        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_page == 1)
    {
    	this.m_displayPos = parseInt(this.m_displayPos)  + 1;
    }

    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;
    if(this.m_page == 1)
    {
      displayTop = 190;
    }else if(this.m_page == 2)
    {
      displayTop = -10;
    }
    var harPos = this.m_displayPos%3;
    var vertPos = Math.floor(this.m_displayPos/3);

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

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

    var popupWidth = 212;
    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 + 10 ;
            }
          }
          else if(extraWidth ==6)
          {	  
            if(harPos == 1)
            {
              displayTop = displayTop + 10;
              displayLeft = displayLeft -20 ;
            }
            if(harPos == 2)
            {
              displayTop = displayTop + 10;
              displayLeft = displayLeft - 130 ;
            }
          } 
		  else if(extraWidth ==7)
          {	 
            if(harPos == 1)
            {
              displayTop = displayTop + 10;
              displayLeft = displayLeft - 130 ;
            }
            if(harPos == 2)
            {
              displayTop = displayTop + 10;
              displayLeft = displayLeft - 210;
            }
          }
		  else if(extraWidth ==8)
          {  
            if(harPos == 1)
            {
              displayTop = displayTop + 10;
              displayLeft = displayLeft - 155 ;
            }
            if(harPos == 2)
            {
              displayTop = displayTop + 10;
              displayLeft = displayLeft - 210;
            }
          }
      }else
      {
    	displayTop = displayTop -14;
        if(harPos == 1)
        {
              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)
	{
	    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 > 19)
          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";
    document.getElementById('calendar_body_container').style.overflow='hidden';
    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()"  onClick="javascript:trackMainArea(this,'link_upload')"><%=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:openFlexUploadLayer()");
        Event.observe(anchorTag31, 'click', function(){
           trackMainArea( this ,'link_upload');
        });

        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);
        
        //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)");
        Event.observe(anchorTag2, 'click', function(){
           trackMainArea( this ,'link_style');
        });

        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(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");
        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";
					}
					trackMainArea( this ,' size_' + m_CalData.sizes[userSelOption].fid);
				});
                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;
    }
});


/*
To display to select size dropdown.
<div>
<span style="text-align:left;"><%=resBundle.getMessage("calendar_size") %></span><br /><br />
<div class="calendars-sizes" >
             <img src="images/spacer.gif" width="1" height="7" /><br />
             <img src="/default/images/calendars/icon-85x11.png" width="52" height="43" />
             <br /><img src="/default/images/spacer.gif" width="1" height="7" /><br />
             8.5" x 12"
        	</div>               
         <div class="calendars-sizes">
             <img src="/default/images/calendars/icon-12x12.png" width="56" height="54" />
             <br /><img src="/default/images/spacer.gif" width="1" height="4" /><br />
             12" x 12"
         </div>                
         <div class="calendars-sizes">
             <img src="/default/images/calendars/icon-115x14.png" width="63" height="52" />
             <br /><img src="/default/images/spacer.gif" width="1" height="4" /><br />
             11.5" x 12"
         </div>
        </div>		
			            
*/
 var CNewSizeSectionOption = 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.renderNewSizes );

    } , // end of init
    renderNewSizes : function(pageDataObject)
    {
		var m_CalData = calAssets.getAssets() ;//.getAssets();
		var szId = this.m_sizeId;
		var userSelOption = 0;
        var sizeDiv = $(document.createElement("div"));
        sizeDiv.setAttribute("id", "sizenewdisplay");
        sizeArray  = m_CalData.styles[this.m_styleId].sizes;
        occSizeList = sizeArray.split(",");
		// currect Fix
		if (m_CalData.sizes[this.m_sizeId].fid == "11x14")
		{
			document.getElementById("hideText").style.visibility="visible";
		}
		else
		{
			document.getElementById("hideText").style.visibility="hidden";
		}
		
		//TO display size and price text
		var sizeSpanText = $(document.createElement("span"));
		sizeSpanText.setAttribute("id", "sizespandisplayprice");
		var sizeSpanTextNode = document.createTextNode(m_CalData.others[0].calendar_size);
		sizeSpanText.appendChild(sizeSpanTextNode);
		
		var displaySize = document.createTextNode(" " + m_CalData.sizes[this.m_sizeId].shop_size_text );
		var displaySizeBld = $(document.createElement("b"));
		displaySizeBld.appendChild(displaySize);               
		sizeSpanText.appendChild(displaySizeBld);
		
		var displayStartAt = document.createTextNode(  " " + m_CalData.others[0].starting_at + " ");
		sizeSpanText.appendChild(displayStartAt);
		
		var monthsSupNewPrice= m_CalData.sizes[this.m_sizeId].months.price_new;
		var monthsSup = m_CalData.sizes[this.m_sizeId].months.supported.split(",");
        var index = 0;
		if(m_CalData.styles[userSelectedStyle].premiumid == m_CalData.styles[userSelectedStyle].fid){
            monthsSupNewPrice = m_CalData.licensedStyle[userSelectedStyle].months.premium_price;
             index=(userSelectedSize*(monthsSup.length))+parseInt(monthOptionSelected);
        }
		var monthSuppListNewPrice= monthsSupNewPrice.split(","); 
		var monthsSupPrice= m_CalData.sizes[this.m_sizeId].months.price;                               
		var monthSuppListPrice= monthsSupPrice.split(",");
		             
		var priceTagDisplay = $(document.createElement("span")); 
		if(index > 0){
		    if (monthSuppListNewPrice != null && monthSuppListNewPrice.length > 1){
		        priceTagDisplay.innerHTML = monthSuppListNewPrice[index];
		    }else{
		        priceTagDisplay.innerHTML = monthSuppListNewPrice[0];
		    }
		}
        else
        priceTagDisplay.innerHTML = monthSuppListNewPrice[monthOptionSelected];                		//this in page 3
		sizeSpanText.appendChild(priceTagDisplay);
	////
			       
		var sizeSpanBR1 = $(document.createElement("br"));
		sizeSpanText.appendChild(sizeSpanBR1);
		var sizeSpanBR2 = $(document.createElement("br"));
		sizeSpanText.appendChild(sizeSpanBR2);		

		var allSizeDiv = $(document.createElement("div"));
       
		        		
         if(occSizeList!= null && occSizeList.length >0)
        {
            for(i=0; i<occSizeList.length; i++)
            {
                
		        var anchorTag = $(document.createElement("a")); 
		        anchorTag.setAttribute("value", "eachsizediv"+ occSizeList[i] + "," + this.m_sizeId  + "," + occSizeList[i]);
				anchorTag.setAttribute("href" , "javascript:displaySelectedSize('eachsizediv"+ occSizeList[i] + "'," +occSizeList[i]+ ")");						
				Event.observe(anchorTag, 'click', function(){	
					argPassed = this.getAttribute('value');
					argPassedList= argPassed.split(",");				
					trackMainArea( this ,' size_' + m_CalData.sizes[argPassedList[2]].fid);
				});
								        			
				var eachSizeDiv = $(document.createElement("div"));
				eachSizeDiv.setAttribute("id", "eachsizediv"+ occSizeList[i]);
				
				if(this.m_sizeId ==occSizeList[i])
			        eachSizeDiv.addClassName("calendars-sizes-selected");         								
				else
			        eachSizeDiv.addClassName("calendars-sizes");      
			           				
				var eachImage = $(document.createElement("img"));
		       eachImage.setAttribute("src",  m_CalData.sizes[i].shop_size_image) ;
		        
		        var eachBR = $(document.createElement("br"));
		        
				var sizeSpanFotter = $(document.createElement("span"));
				var sizeSpanFotterNode = document.createTextNode(m_CalData.sizes[occSizeList[i]].shop_size_text);
				sizeSpanFotter.appendChild(sizeSpanFotterNode);
				anchorTag.appendChild(eachImage);	
				anchorTag.appendChild(eachBR);							
				anchorTag.appendChild(sizeSpanFotter);
				
				eachSizeDiv.appendChild(anchorTag);		
				allSizeDiv.appendChild(eachSizeDiv);
                Event.observe(anchorTag, 'mouseover', function(){
                    argPassed =  this.getAttribute('value');
                    argPassedList= argPassed.split(",");
                    showSelectedSize( argPassedList[0], argPassedList[1] ,argPassedList[2],'over');
                });
                
                Event.observe(anchorTag, 'mouseout', function(){
                    argPassed =  this.getAttribute('value');
                    argPassedList= argPassed.split(",");
                    showSelectedSize( argPassedList[0], argPassedList[1] ,argPassedList[2],'out');
                });
                                                    				
            }
        }
        sizeDiv.appendChild(sizeSpanText);
        sizeDiv.appendChild(allSizeDiv);                
        var x=document.getElementById("sizenewdisplay");
        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