//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 previousPage = 0;
var CCalendarAssets = Class.create({
  m_calendarAssets : null,
  fillData : function(designsJson)
  {
    // just fill the data
    var oCalAssets = new CCalendarAssets() ;
	m_calendarAssets = designsJson;
    return oCalAssets ;

  },
  getAssets : function()
  {
    return m_calendarAssets;
  }
  });

/*
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,alttext,alttext1)
  {
	  var m_CalData1 = pageDataObject ;//.getAssets();
	  var calsizes=m_CalData1.sizes.length
      var styleDiv = $(document.createElement("div"));  
  	  styleDiv.setAttribute("id", "displayFewStyleId");
	  var occStyles = m_CalData1.occasions[$(this.m_occ)].styles;
	  occStylesList= occStyles.split(",");
		if(occStylesList!= null && occStylesList.length>0)
	  {
		  for(i=0; i<occStylesList.length; i++)
      {
        if(i > 4)
        {
          i = (occStylesList.length -1);
        }

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

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

				var stlTitle = $(document.createElement("div"));  
				if(calsizes == 1){
				stlTitle.addClassName("seasonalcn");
				}else{
				stlTitle.addClassName("seasonal");
				}

				var titleP = document.createElement("p");  
				var titleDiv = $(document.createElement("div"));  
				var buttonImg = document.createElement("img");
				 buttonImg.setAttribute("src","/default/images/snapfish/snapfish_eu/store/secondarypages/arrow-img.gif");
				 buttonImg.setAttribute("align","middle");
  		        var headerDisplayNameNode = document.createTextNode(m_CalData1.styles[occStylesList[i]].header);
				titleP.appendChild(buttonImg);
				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);
				imageTab.setAttribute("title", alttext) ;
				if(i == (occStylesList.length -1)){
				imageTab.setAttribute("title", alttext1) ;
				}
				anchorTag.appendChild(imageTab);
				anchorTag.appendChild(titleP);
				imageDiv.appendChild(anchorTag);
				titleDiv.appendChild(anchorTag);

				if(i == (occStylesList.length -1) )
				{
					var footerDiv = $(document.createElement("div"));  
					footerDiv.setStyle({height:"20px"});				
				}
				else
			    {
					var footerDiv = $(document.createElement("div"));  
					footerDiv.addClassName("seasonal-background");
	
					var footrDisplayNameNode = document.createTextNode(eval('m_CalData1.styles['+ occStylesList[i] + '].footer_' + m_CalData1.sizes[tempsizeId].fid));
					footerDiv.appendChild(footrDisplayNameNode);
				}				

				//stlTitle.appendChild(imageDiv);
				stlTitle.appendChild(titleDiv);
				stlTitle.appendChild(footerDiv);

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

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

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

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

				eachstyleDiv.appendChild(stlTitle);
				//eachstyleDiv.appendChild(imageTopL);
				//eachstyleDiv.appendChild(imageTopR);
				//eachstyleDiv.appendChild(imageBotL);
				//eachstyleDiv.appendChild(imageBotR);

  		        styleDiv.appendChild(eachstyleDiv);

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


/*
To display Calendar all section.
*/

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

  } , // end of init
  renderAllStyles : function(pageData,alttext)
  {
	  var m_CalData1 = pageData ;//.getAssets();
	  var calsizes=m_CalData1.sizes.length	  
      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"));  
				if(calsizes == 1){
				stlTitle.addClassName("seasonalcn");
				}else{
				stlTitle.addClassName("seasonal");
				}


				var titleDiv = $(document.createElement("div"));  
				var titleP = document.createElement("p");  
				var buttonImg = document.createElement("img");
				 buttonImg.setAttribute("src","/default/images/snapfish/snapfish_eu/store/secondarypages/arrow-img.gif");
				 buttonImg.setAttribute("align","middle");
  		        var headerDisplayNameNode = document.createTextNode(m_CalData1.styles[occStylesList[i]].header);
				titleP.appendChild(buttonImg);
				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", alttext) ;
				anchorTag.appendChild(imageTab);
				anchorTag.appendChild(titleP);
				imageDiv.appendChild(anchorTag);
				titleDiv.appendChild(anchorTag);

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

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


			//	stlTitle.appendChild(imageDiv);
				stlTitle.appendChild(titleDiv);
				stlTitle.appendChild(footerDiv);

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

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

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

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

				eachstyleDiv.appendChild(stlTitle);
				//eachstyleDiv.appendChild(imageTopL);
				//eachstyleDiv.appendChild(imageTopR);
				//eachstyleDiv.appendChild(imageBotL);
				//eachstyleDiv.appendChild(imageBotR);

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

/*
To display Calendar size view section.
*/

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

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

	  var m_CalData = pageDataObject ;//.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"));  
				if(occSizeList == 1){
				stlTitle.addClassName("seasonalcn");
				}else{
				stlTitle.addClassName("seasonal");
				}

				var titleDiv = $(document.createElement("div"));  
				var titleP = document.createElement("p");  
				var buttonImg = document.createElement("img");
				 buttonImg.setAttribute("src","/default/images/snapfish/snapfish_eu/store/secondarypages/arrow-img.gif");
				 buttonImg.setAttribute("align","middle");
  		        var headerDisplayNameNode = document.createTextNode(m_CalData.sizes[i].name);
				titleP.appendChild(buttonImg);
				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 );

				var imageTab = document.createElement("img");
			    imageTab.setAttribute("src", m_CalData.sizes[i].image0) ; 
			    Event.observe(anchorTag, 'click', function(){
                    argPassed =  this.getAttribute('value');
                    trackMainArea( this ,' size_' + argPassed);
                });
				anchorTag.appendChild(imageTab);
				anchorTag.appendChild(titleP);
				imageDiv.appendChild(anchorTag);
				titleDiv.appendChild(anchorTag);

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

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

        var monthSuppListPrice= monthsSupPrice.split("#");
				var footrDisplayNameNode = document.createTextNode(monthSuppListPrice[0]);

				footerDiv.appendChild(footrDisplayNameNode);
				//stlTitle.appendChild(imageDiv);
				stlTitle.appendChild(titleDiv);
				stlTitle.appendChild(footerDiv);

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

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

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

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

				eachSizeDiv.appendChild(stlTitle);
				//eachSizeDiv.appendChild(imageTopL);
				//eachSizeDiv.appendChild(imageTopR);
				//eachSizeDiv.appendChild(imageBotL);
				//eachSizeDiv.appendChild(imageBotR);

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


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

  } , // end of init
  renderMonths : function(pageDataObject)
  {
	  var m_CalData1 = pageDataObject ;//.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;
      var index = 0;
	  if(m_CalData1.styles[userSelectedStyle].premiumid == m_CalData1.styles[userSelectedStyle].fid){
				     monthsSupPrice = m_CalData1.licensedStyle[userSelectedStyle].months.premium_price;
				      if(m_CalData1.months.length == 1){
				      index=(userSelectedSize*1)+parseInt(monthOptionSelected);
				      }else{
				      index=(userSelectedSize*2)+parseInt(monthOptionSelected);
				      }
	  }	  
	   monthSuppList= monthsSup.split(",");
	  monthSuppListPrice= monthsSupPrice.split("#");

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

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

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

			  if(document.all && !window.opera && document.createElement)
			  {
				  if(i==this.m_selOption)
					var radioOpt = document.createElement("<input type='radio' name='monthOptions' id='monthOptions"+i+"' checked value='" + i + "'>");
				  else
					var radioOpt = document.createElement("<input type='radio' name='monthOptions' id='monthOptions"+i+"' value='" + i + "'>");
					radioOpt.setAttribute("prop" , m_CalData1.months[monthSuppList[i]].fid );
          
                    Event.observe(radioOpt, 'click', function(){
                        argPassed =  this.getAttribute('prop');
                        onMonthSelection(this);
                        trackMainArea( this ,'radiobutton_' + argPassed);
                    });          
			  }
			  else
			  {
				var radioOpt = $(document.createElement("input"));  
				radioOpt.name='monthOptions';
				radioOpt.id = 'monthOptions';
				radioOpt.type = 'radio';
				radioOpt.value = i;
				//radioOpt.setAttribute("onClick","javascript:onMonthSelection(this);");
				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(data.months[monthSuppList[i]].name + ' ');

			var priceDiv = $(document.createElement("span")); 
			priceDiv.addClassName("dollar");
			var priceDisplayNameNode = "";
			if(index > 0)
			 priceDisplayNameNode = document.createTextNode(monthSuppListPrice[index+i]);
			else
			 priceDisplayNameNode = document.createTextNode(monthSuppListPrice[i]);
			priceDiv.appendChild(priceDisplayNameNode);

			monthsDiv.appendChild(breakDiv);

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


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

  } , // end of init
  renderSizeSelection : function(pageDataObject)
  {
	  var m_CalData1 = pageDataObject ;//.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] +")");

			var imageTab = document.createElement("img");
			imageTab.setAttribute("src",  m_CalData1.sizes[styleSupSizesList[i]].image1) ; 
			anchorTag.setAttribute("value" , m_CalData1.sizes[styleSupSizesList[i]].fid );
			Event.observe(anchorTag, 'click', function(){
            argPassed =  this.getAttribute('value');
            trackMainArea( this ,'select_size_' + argPassed);
            });
			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;
  }
});


/*
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 = pageDataObject ;//.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:"10px",left:"10px", width:"509px",position:"absolute"});
      
	  var displayTop = 0;
	  var displayLeft = 0;
	  if(this.m_page == 1)
	  {
		displayTop = 190;
	  }else if(this.m_page == 2)
	  {
		displayTop = 40;
	  }

	  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;
  }
});

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 = pageDataObject ;//.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);
    }


	var harPos = this.m_displayPos%3;
    var vertPos = Math.floor(this.m_displayPos/3);

    styleBackList= stlBack.split(",");
    var displayTop = 0;
    var displayLeft = 0;
    if(this.m_page == 1)
    {
      displayTop = 100;
	  if(vertPos == 0){
	  displayTop = 50;
	  }
    }else if(this.m_page == 2)
    {
      displayTop = 20;
	  if(vertPos == 0){
	  displayTop = -40;
	  }else if(vertPos == 2){
	  displayTop = 50;
	  }else if(vertPos == 3){
	  displayTop = 120;
	  }else if(vertPos == 4){
	  displayTop = 170;
	  }else if(vertPos == 5){
	  displayTop = 220;
	  }else if(vertPos == 6){
	  displayTop = 270;
	  }else if(vertPos == 7){
	  displayTop = 320;
	  }

    }
    if(harPos == 0)
    {
      displayLeft = 50;

    }else  if(harPos == 1)
    {
      displayLeft = 120;
    }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 + 100 ;
            }
          }          

      }else
      {
        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:"0px", 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
	{
		if(styleBackList.length > 6){
		popupDiv7.setAttribute("align", "center");
		popupDiv7.setStyle({paddingRight:"60px"});
		}else{
		popupDiv7.setAttribute("align", "right");
		popupDiv7.setStyle({paddingRight:"60px"});
		}
	}

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

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

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

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

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


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

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

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

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

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

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

/*
To display to Style backgrounds.  Need to work on this
*/
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 = pageDataObject ;//.getAssets();
      var styleHeadDisplayDiv = document.createElement("div");  
      styleHeadDisplayDiv.setAttribute("id", "styleheadDiv");
       
       	var displayText = $(document.createElement("div")); 
        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 = pageDataObject ;//.getAssets();
      var styleHeadDisplayDiv = document.createElement("div");  
      styleHeadDisplayDiv.setAttribute("id", "sizeheadDiv");

		var displayText = $(document.createElement("div")); 
        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 = pageDataObject ;//.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 = pageDataObject ;//.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 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 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");
		  
	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-content1");

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

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

    //var tableTd3 = $(tableTr.insertCell(-1));
    //tableTd3.addClassName("styles-popup-right-shadow");
    //tableTd3.appendChild(imageSpacer9);
		  
     	  var ImageUl;
    	if(styleBackList!= null && styleBackList.length>0)
		  {
		  
			  for(i=0; i<styleBackList.length; i++)
			  {
		    	if(i > 11)
 	        	break;

    	    	if((i % 2) == 0)
        		{
         	 	if(i!=0)
          		tableTd2.appendChild(ImageUl);
          		ImageUl = $(document.createElement("ul"));
        		}

				var imageTab = $(document.createElement("img"));
		        var ImageLi = $(document.createElement("li"));
        				
				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);
		        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);
		styleBackDisplayDiv.appendChild(displayText);
		styleBackDisplayDiv.appendChild(popupTable);
	  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 = pageDataObject ;//.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 = pageDataObject ;//.getAssets();
		var headerDIV = $(document.createElement("div"));
		headerDIV.addClassName("subheadpopup");
		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 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 = pageDataObject ;//.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 div1 = $(document.createElement("div"));  
      div1.setStyle({marginTop:"4px"});

	  var breaktag = document.createElement("br");
	  var span1Div1 = $(document.createElement("span"));  
      span1Div1.addClassName( "lable");
      var textDisplayNameNode1 = document.createTextNode(m_CalData.others[0].size_disp_text);
	  span1Div1.appendChild(textDisplayNameNode1);
	
	  var span2Div1 = $(document.createElement("span"));  
      span2Div1.addClassName("text");
      var textDisplayNameNode2 = document.createTextNode(m_CalData.sizes[szId].name);
	  span2Div1.appendChild(textDisplayNameNode2);

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


	  var anchorTag1 = document.createElement("a");
      anchorTag1.setAttribute("href" , "javascript:expandSize()");
      Event.observe(anchorTag1, 'click', function(){
           trackMainArea( this ,'link_size');
        });
      var textDisplayNameNode3 = document.createTextNode(m_CalData.others[0].size_change_text);
	  anchorTag1.appendChild(textDisplayNameNode3);
  	  span3Div1.appendChild(anchorTag1);

	  div1.appendChild(span1Div1);
	  div1.appendChild(breaktag);
	  div1.appendChild(span2Div1);
	  if(m_CalData.styles[this.m_styleId].sizes != 0){
	  div1.appendChild(span3Div1);
	  }
	  var breaktag1 = document.createElement("br");
	  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 span2Div2 = $(document.createElement("span"));  
      span2Div2.addClassName("text");
      var textDisplayNameNode6 = document.createTextNode(m_CalData.styles[this.m_styleId].name);
	  span2Div2.appendChild(textDisplayNameNode6);

	  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(breaktag1);	  
 	  div2.appendChild(span2Div2);
	  div2.appendChild(span3Div2);

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


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


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

  } , // end of init
  renderSizeSelectionDisplay : function(pageDataObject)
  {
	  var m_CalData1 = pageDataObject ;//.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");
    
    imageTab1.setAttribute("src",eval('m_CalData1.styles['+ this.m_styleId + '].popup_' +  m_CalData1.styles[this.m_styleId].fid + '_' + m_CalData1.sizes[szId].fid)) ;
			imageTab1.setAttribute("border",0);
			imageTab1.setAttribute("width",327);
			imageTab1.setAttribute("height",257);
			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("headerpopup");
			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);

			var popupLiTag4 = document.createElement("li");
			var textDisplayNameNode6 = document.createTextNode(m_CalData1.sizes[szId].text6);
			popupLiTag4.appendChild(textDisplayNameNode6);
			
			 var breaktag1 = document.createElement("br");
			 
			
			
			popupULTag.appendChild(popupLiTag1);
    		popupULTag.appendChild(imageTab2);
			popupULTag.appendChild(popupLiTag2);
			popupULTag.appendChild(imageTab3);
			popupULTag.appendChild(popupLiTag4);
			popupULTag.appendChild(breaktag1);
			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;
  }
});
/////////////////////////////////////CCalendarAssetsDataComponent ///////////////////////

var CCalendarAssetsDataComponent = Class.create({
  //m_url : undefined ,
  initialize: function(url, topicName) {
    this.m_url = url;
    this.topicName = topicName ;
  },
  subscribe :function(_topicName)
  {
    //this.m_url = url ;
	alert('tets' + _topicName);
    CEventDispatcher.subscribe(_topicName, this , this.load );
  } ,
  load :  function()
  {
    // load this URL, get the data, then publish this message
    //if(typeof(loadDataFromDataHost) != "function") throw "util method  loadDataFromDataHost is not defined!" ;
    //util method, look in clientV2.js

    //(new Utils()).loadDataFromDataHost(null, this);

	this.callbackDataHandler(data);
    //return this ;
  } ,

  getReadUrl : function ()
  {
    return this.m_url ;
  } ,
  callbackDataHandler : function (dataObject)
  {
    //if(typeof(CEventDispatcher) != "object") throw  "please include clientv2.js!" ;

    // you may want to hide the progress bar(s) now.
    // publish to only one topic, let all the view components listen to this

    //alert("ok! data is ready now!");
    var calDesigns = (new CCalendarAssets()).fillValue(dataObject);
    // now publish the call back to occasion tree view component

    CEventDispatcher.publish(this.topicName , calDesigns );

  }
});// end of function

/*
  To display and select sizes per option buttons.
*/

 var CSizeSectionOptionAsOptionButtons = 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 = pageDataObject;//.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");
      for(i=0; i<occSizeList; i++)
      {
   	  if(document.all && !window.opera && document.createElement)
		  {
			  if(i==this.m_sizeId)
				var sizeRadioOption = document.createElement("<input type='radio' name='sizeRadioOption' id='sizeRadioOption"+i+"' checked value='" + i + "'>");
			  else
				var sizeRadioOption = document.createElement("<input type='radio' name='sizeRadioOption' id='sizeRadioOption"+i+"' value='" + i + "'>");
	  
       }
       else
	   {
        var sizeRadioOption = $(document.createElement("input"));
        sizeRadioOption.name = "sizeRadioOption";
        sizeRadioOption.id = "sizeRadioOption";
        sizeRadioOption.type = "radio";
        sizeRadioOption.value = i;
        if(i==this.m_sizeId) sizeRadioOption.checked = "checked";
	   }    

        var leftdiv = $(document.createElement("div"));
        leftdiv.style.cssFloat="left";
        leftdiv.style.styleFloat="left";
        leftdiv.appendChild(sizeRadioOption);
        leftdiv.style.height="50px";
        
        
		var calendarfullname = m_CalData.sizes[i].name.split(" ");
		var calendarnamessize = calendarfullname.length - 1;
		var calendarname = '';
		
		for(a=0; a<calendarnamessize; a++)
		{
			calendarname = calendarname + calendarfullname[a] + ' ';
		}
        
        var rightdiv = $(document.createElement("div"));
        rightdiv.style.height="50px";
        
        if(!cm == ''){
            rightdiv.appendChild(document.createTextNode(calendarname));
        }else{
        	rightdiv.appendChild(document.createTextNode(m_CalData.sizes[i].text1 ));
        }
        rightdiv.appendChild($(document.createElement("br")));
        
        if(!cm == ''){
        	rightdiv.appendChild(document.createTextNode(calendarfullname[calendarnamessize] + ' ' + cm));
        }else{
        	rightdiv.appendChild(document.createTextNode(m_CalData.sizes[i].fid));
        }
       // rightdiv.appendChild(document.createTextNode("*"));
        rightdiv.appendChild($(document.createElement("br")));
          
        var price = m_CalData.sizes[i].months.price;

        var monthSuppListPrice;
        
		if(m_CalData.styles[userSelectedStyle].premiumid == m_CalData.styles[userSelectedStyle].fid){
			price = m_CalData.licensedStyle[userSelectedStyle].months.premium_price;
			monthSuppListPrice= price.split("#");
			rightdiv.appendChild(document.createTextNode(monthSuppListPrice[i]));
		}else{
			monthSuppListPrice= price.split("#");
			rightdiv.appendChild(document.createTextNode(monthSuppListPrice[0]));
		}
		
		sizeOptionsDiv.appendChild(leftdiv);
        sizeOptionsDiv.appendChild(rightdiv);
          
        sizeDiv.appendChild(sizeOptionsDiv);
        
        Event.observe(sizeRadioOption, 'click', function(){
        userSelOption = onSizeSelectionPerOptionBTN(this);
        trackMainArea( this ,' size_' + m_CalData.sizes[userSelOption].fid);
        });
      }
    }
    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.
*/
 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 = pageDataObject;//.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;
    }
});

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

  function onSizeSelectionPerOptionBTN(element)
  {
    userSelectedSize = element.value;
	  (new CStyleMainImageDisplayView('stylemaindisplayimage',userSelectedStyle,userSelectedSize)).renderStyleMainImage(data);
	return userSelectedSize;
  }