var HTMLFactory = {
	/*
	 * createPhotoItem() - create a photo item and return it
	 * 	@params
	 * 		Object options - expected { href, title, src, width, height, title, id, ownerHref, owner }
	 */
	createPhotoItem: function( options, photoClickCallback, callbacks ) {
		var photoItem = new Element( 'div', {
			'class': 'photoContainer'
		}).adopt( 
			new Element( 'a', {
				'class': 'photo',
				'href': UI.settings.voidLink,
				'title': options.title,
				'guiID': options.value,
				'events': { 
					'click': photoClickCallback
				}
			}).adopt( 
				new Element( 'img', {
					'src': options.src,
//					'width': options.width,
//					'height': options.height,
					'alt': options.title,
					'id': 'img_' + options.id
				})
			),
			new Element( 'div', {
				'class': 'photoDetails'
			}).adopt(
				new Element( 'div', {
					'class': 'checkbox'
				}),
				new Element('span').setText( 'Shared by: ' ),
				new Element( 'a', {
					'href': options.ownerHref,
					'title': options.owner
				}).setText( options.owner )
			)
		);
		return photoItem;
	},
	createStatesDropDown: function(StatesJson, SelectElement) {
	    //var OptionTags = new Array();
	    SelectElement.innerHTML = "";
	    for(var i =0;i<StatesJson.length;i++) {
	        SelectElement.adopt(new Element('option', {'value': StatesJson[i].StateCode}).setText(StatesJson[i].StateCode));
	    }
	    
	},
	createNewbornPortraitsAuthentication: function(options) {
	    var authenticationContainer = new Element("tr", {'id': options.id});
        var mainTD = new Element("td", {'colspan': '5', 'class': 'showit'});
        var showblock = new Element("div", {'class': 'showblock clearfix'});
        var formContainer = new Element("div", {'class': 'formContainer searchByAccessCode'});
	                         
	    //var pTag = new Element("p").setText("Please enter the password and the Mothers Last name to view this baby. In most cases, your password is your Our365 Customer Number.");

        // 4-9-2008 CL
        // calls the 2 functions at bottom of Our365.js for Kapiolani (2770) who didn't want Our365 text shown
	    var pTag = new Element("p");
	    if (isNoOur365BrandHosp(getHospId()))
	    {
	        pTag.setText("Please enter the password and the first 4 letters of the Mother's last name to view this baby.");
        }
        else
        {
	        pTag.setText("Please enter the password and the first 4 letters of the Mother's last name to view this baby. In most cases, your password is your Our365 Customer Number.");
        }
	    var table = new Element( "table", {'class': 'formLayout','cellPadding':'0', 'cellSpacing': '0','border': '0' } );
	    var tBody = new Element("tbody");
	    
	    var tr = new Element("tr");
	    var tr2 = new Element("tr");
	    
	    var td1 = new Element("td").adopt(new Element("label").setText("Password"));
	    
	    var td2 = new Element("td").adopt(new Element("label").setText("Last name"));
	    var td3 = new Element("td").setText(" ");
	    
	    var td4 = new Element("td").adopt(
	        new Element("div", {'class': 'formControl'}).adopt(
	            new Element("fieldset").adopt(
	                new Element("input", {'class': 'inputText', 'type': 'text', 'id': 'input'+options.id})
	            )
	        )
	    );
	    var td5 = new Element("td").adopt(
	        new Element("div", {'class': 'formControl'}).adopt(
	            new Element("fieldset").adopt(
	                new Element("input", {'class': 'inputText', 'type': 'text', 'maxlength': '4', 'size': '4', 'id': 'mothersinput'+options.id})
	            )
	        )
	    );
	    var td6 = new Element("td", {'class': 'formActionCol'}).adopt(
	        new Element("a", {'href': UI.settings.voidLink, 'id': 'submitButton'+options.id}).adopt(
	            new Element("img", {'src':'/App_Themes/Default/img/button_submit_grn_wht_off.gif', 'alt': 'Submit'})
	        )
	    );
	    
        tr.adopt(td1);
        tr.adopt(td2); 
        tr.adopt(td3);
        tr2.adopt(td4);
        tr2.adopt(td5); 
        tr2.adopt(td6);  
        tBody.adopt(tr);
        tBody.adopt(tr2);
        table.adopt(tBody);
        
        formContainer.adopt(pTag);
        formContainer.adopt(table);
        showblock.adopt(formContainer);       
        mainTD.adopt(showblock); 
        authenticationContainer.adopt(mainTD);  
        
	    return authenticationContainer;
	},
	createGenericWindow: function(str, options) {
		var newWindow;
		var colorTheme = UI.getPageTheme();
		
		if( options != UI.settings.window.loading ) {
			var buttonEles = [];
			
			for( var key in options ) {
				buttonEles.push( 
					new Element('a', {
						'href': UI.settings.voidLink,
						'class': key + " " + key + "Button",
						'events': {
							'click': options[key]
						}
					}).adopt( 
						new Element('img', {
							'src': UI.settings.blankImage,
							'width': HTMLFactory.settings.window[key].width,
							'height': HTMLFactory.settings.window[key].height,
							'alt': key
						})
					)
				);
			}
			
			buttonEles.each(function(ele){
				ele.addEvent('click', function() {
					UI.fadeOutElement(newWindow);
				});
			});	
			
			var innerContent = [
				new Element( 'a', {
					'class': 'close',
					'href': UI.settings.voidLink
				}).adopt( 
					new Element('img', {
						'src': UI.settings.blankImage,
						'width': 36,
						'height': 33,
						'alt': '[x]'
					})
				),
				new Element( 'h2' ).setHTML( str.title ),
				new Element( 'p', {
					'class': 'message'
				}).setHTML(str.message),
				new Element( 'div', {
					'class': 'genericWindowButtonContainer'
				}).adopt( buttonEles )
			];
		} else {
			var innerContent = new Element( 'div', {
				'class': 'loading'
			}).adopt( new Element('p').setHTML(str) );
		}
		
		newWindow = new Element('div', {
			'class': 'genericWindowContainer'
		}).adopt( 
			new Element( 'div', {
				'class': 'genericWindow window clearfix'
			}).adopt( 
				new Element('div', {
					'class': 'innerPad clearfix'
				}).adopt( innerContent )
			)
		);
		console.log(newWindow);
		return newWindow;
	},
	createNewbornPortraitsBabyIntroduction: function(options) {
	    var BabyIntroductionContainer = new Element("tr", {'id': options.id});
	    var BabyIntroductionTD = new Element("td", {'colspan': '5', 'class': 'showit'});
	    var BabyIntroductionShowBlockDiv = new Element("div", {'class': 'showblock clearfix'});
	    
	    var buttonViewFullDetailPath = '/App_Themes/Default/img/button_view_full_detail_grn_wht_off.gif';
	    if( $defined( options.Birth.SapHospitalId ) ) {
	        if ( options.Birth.SapHospitalId == '4203' ) {
	            buttonViewFullDetailPath = '/Customizations/' + options.Birth.SapHospitalId + '/view_full.gif';
	        }
	    }
	    	    
	    for(var i=0;i<options.Birth.BabyList.length;i++) {
	        var babyIntroduction;
	        
	        if(i==0){
	            babyIntroductionClassString = 'babyIntroduction first clearfix';
	        }else {
	            babyIntroductionClassString = 'babyIntroduction clearfix';
	        }
	        
	        babyIntroduction = new Element("div", {'class': babyIntroductionClassString});
	        
	        if( $defined( options.Birth.BabyList[i].Photos[0] ) ) {
				if( $defined( options.Birth.BabyList[i].Photos[0].PhotoUrl ) ) {
				    width=options.Birth.BabyList[i].Photos[0].IsPortrait?'90':'120';
				    height=options.Birth.BabyList[i].Photos[0].IsPortrait?'120':'90';
				    
					babyIntroduction.adopt(
						new Element("div", {'class': 'photo'}).adopt(
							new Element( "a", { 'href': GetWebNurseryRedirectRoot() + '?birthid=' + options.id } ).adopt(
								new Element( "img", {
							        'src': options.Birth.BabyList[i].Photos[0].PhotoUrl,
								    'width': width,
								    'height': height,
								    'class': 'disableRightClick'
								})
							)
						)
					);
				}
			}
			
			babyIntroduction.adopt(
				new Element("div", { 'class': 'introDetailsContainer clearfix'} ).adopt(
					new Element("div", { 'class': 'introControls'} ).adopt(
						new Element("h4").setText("Introducing"),
						new Element("h5").adopt(
							new Element( "a", { 
								'href': GetWebNurseryRedirectRoot() + '?birthid=' + options.id + "&babyid=" + options.Birth.BabyList[i].BabyId 
							}).setText( options.Birth.BabyList[i].Name )
						)
	//					,
	//					new Element( "div", { 'class': 'actions' } ).adopt( 
	//						new Element("a", { 
	//							'href': 'BabyDetail.aspx?birthid=' + options.id + "&babyid=" + options.Birth.BabyList[i].BabyId
	//						}).setText("More Images")
	//					)
					),
					new Element("div", {'class': 'birthDetails'}).adopt(
						new Element("table", {'cellPadding':'0', 'cellSpacing': '0','border': '0'}).adopt(new Element("tbody").adopt(
						new Element("tr").adopt(new Element("th").setText("Birth Date:"), new Element("td").setText(options.Birth.BabyList[i].BirthDate)),
						new Element("tr").adopt(new Element("th").setText("Birth Time:"), new Element("td").setText(options.Birth.BabyList[i].BirthTime)),
						new Element("tr").adopt(new Element("th").setText("Weight:"), new Element("td").setText(options.Birth.BabyList[i].Weight)),
						new Element("tr").adopt(new Element("th").setText("Length:"), new Element("td").setText(options.Birth.BabyList[i].Length))))
					),
					new Element("div", { 'class': 'detailLinks clearfix'} ).adopt(
						new Element( "div", { 'class': 'buttons' } ).adopt(
							new Element( "a", { 
								'href': GetWebNurseryRedirectRoot() + '?birthid=' + options.id + "&babyid=" + options.Birth.BabyList[i].BabyId 
							}).adopt(
								new Element( "img", { 
									'src': buttonViewFullDetailPath, 
									'width': '104', 
									'height': '20', 
									'alt': 'get full detail'
								})
							)
						),
						(options.IsLoggedIn) ?
                                        (options.IsAssociated) ?
                                            (parent != self) ?
                                                new Element( "a", {
                                                      'class': 'editDetail',
                                                      'href': '/myaccount/parentadmin.aspx?birthId=' + options.id,
						      'target': '_blank'
                                                }).setText( 'Edit Baby Details' )
                                                : new Element( "a", {
                                                      'class': 'editDetail',
                                                      'href': '/myaccount/parentadmin.aspx?birthId=' + options.id
                                                }).setText( 'Edit Baby Details' )
                                        : new Element( "a", {
                                              'class': 'editDetail',
                                              'href': 'javascript:UI.showMessage({message: "Sorry, only the user who set up the account linked to this baby can edit the baby record. If this is your baby, <a href=\'/myaccount/editprofile.aspx\'>click here</a> to create a link between your account and your baby."});'
                                        }).setText( 'Edit Baby Details' )
                                    : (parent != self) ? 
                                               //Open in New Window
						new Element( "a", {
                                                      'class': 'editDetail',
                                                      'href': '/login.aspx?returnurl=/newbornportraits/babydetail.aspx?birthid=' + options.id,
                                                      'target': '_blank'
                                                }).setText( 'Edit Baby Details' )
                                            :new Element( "a", {		    
                                          'class': 'editDetail',
                                          'href': '/login.aspx?returnurl=/newbornportraits/babydetail.aspx?birthid=' + options.id
                                    }).setText( 'Edit Baby Details' )
					)
				)
			);
	        
	        BabyIntroductionShowBlockDiv.adopt(babyIntroduction);
	       
	    }
        BabyIntroductionTD.adopt(BabyIntroductionShowBlockDiv);
        BabyIntroductionContainer.adopt(BabyIntroductionTD);
	    return BabyIntroductionContainer;
	},
	GetNamesHTMLFromJson: function(GirlNameRanks, BoyNameRanks, headingText) {
	   
	    var container = new Element("div");
	    
	    if(headingText) {
	        container.adopt( new Element("h4").setText(headingText));
	    }
	    
	    var babyNameBoxGirl = new Element("div", {'class': 'babyNameList girl'});
	    babyNameBoxGirl.adopt(new Element("h4").setText("Girl Names"));
	    girlsOL = new Element("ol");
	    for(var i =0; i < GirlNameRanks.length; i++) {
	        girlsOL.adopt(new Element("li").setText(GirlNameRanks[i].FirstName.split(" ")[0]));
	    }
	    babyNameBoxGirl.adopt(girlsOL);
	    
	    var babyNameBoxBoy = new Element("div", {'class': 'babyNameList boy'});
	    babyNameBoxBoy.adopt(new Element("h4").setText("Boy Names"));
	    boysOL = new Element("ol");
	    for(var i =0; i < BoyNameRanks.length; i++) {
	        boysOL.adopt(new Element("li").setText(BoyNameRanks[i].FirstName.split(" ")[0]));
	    }
	    babyNameBoxBoy.adopt(boysOL);
	    
	    container.adopt(babyNameBoxGirl);
	    container.adopt(babyNameBoxBoy);
	    
	    
	    return container;
	},
	createGoogleMapPopUpsForHospital: function(options) {
	    if(options.json.Hospitals != null ) {//&& options.json.Hospitals.length != 0) {
	        var popUpComponentContainer = new Element("div", {'class': 'componentMapCallout componentMapCalloutV2'});
	        var selectBox = new Element("select");
	        if(options.json.Hospitals.length == 1) {
	            popUpComponentContainer.adopt(this.getcreateGoogleMapPopUpsHeaderWithHospitalHeader(options.json.Hospitals[0].Name, options.tab));
	        }else {
	            popUpComponentContainer.adopt(this.getcreateGoogleMapPopUpsHeaderWithSelectBox(options.json.Hospitals, selectBox, options.tab));
	        }
	        return {tab: options.tab,content: popUpComponentContainer, selectBox: selectBox};
	    }
	},
	createGoogleMapPopUps: function(options) {
	    var collection = new Array();
	    //console.log(options);
	    if(options.json.StateNameRankGirls != null) {
	        var popUpComponentContainer = new Element("div", {'class': 'componentMapCallout'});
    	    var popUpComponentBody = new Element("div", {'class': 'componentBody babyNames clearfix'});
            
            var BabyNameBoxContainerGirl = new Element("div", {'class': 'babyNameBox girl'});
            
            var BabyNameListGirl = new Element("div", {'class': 'babyNameList clearfix'}).adopt(new Element("h4").setText("Girl Names"));
            var girlsOLone = new Element("ol");
            var girlsOLtwo = new Element("ol", {'start': '6'});
            for(var i =0; i < options.json.StateNameRankGirls.length; i++) {
                if(i <= 4) {
                    girlsOLone.adopt(new Element("li").setText(options.json.StateNameRankGirls[i].FirstName.split(" ")[0] /*+ " (" + options.json.StateNameRankGirls[i].Count + ")"*/));
                }else {
                    girlsOLtwo.adopt(new Element("li").setText(options.json.StateNameRankGirls[i].FirstName.split(" ")[0] /*+ " (" + options.json.StateNameRankGirls[i].Count + ")"*/));
                }
            }
            BabyNameListGirl.adopt(girlsOLone, girlsOLtwo);
            BabyNameBoxContainerGirl.adopt(BabyNameListGirl);
            
            var BabyNameBoxContainerBoy = new Element("div", {'class': 'babyNameBox boy'});
            
            var BabyNameListBoy = new Element("div", {'class': 'babyNameList clearfix'}).adopt(new Element("h4").setText("Boy Names"));
            var boysOLone = new Element("ol");
            var boysOLtwo = new Element("ol", {'start': '6'});
            for(var i =0; i < options.json.StateNameRankBoys.length; i++) {
                if(i <= 4) {
                    boysOLone.adopt(new Element("li").setText(options.json.StateNameRankBoys[i].FirstName.split(" ")[0] /*+ " (" + options.json.StateNameRankBoys[i].Count + ")"*/));
                }else {
                    boysOLtwo.adopt(new Element("li").setText(options.json.StateNameRankBoys[i].FirstName.split(" ")[0] /*+ " (" + options.json.StateNameRankBoys[i].Count + ")"*/));
                }
            }
            BabyNameListBoy.adopt(boysOLone, boysOLtwo);
            BabyNameBoxContainerBoy.adopt(BabyNameListBoy);
            
            popUpComponentBody.adopt(BabyNameBoxContainerGirl, BabyNameBoxContainerBoy);
	        popUpComponentContainer.adopt(this.getcreateGoogleMapPopUpsHeader(options.stateName), popUpComponentBody, this.getcreateGoogleMapPopUpsFooter());
	    
	        collection.push({tab: options.stateTab, content: popUpComponentContainer});
	    }
	    if(options.json.CityNameRankGirls != null) {
	        var popUpComponentContainer = new Element("div", {'class': 'componentMapCallout '});
    	    var popUpComponentBody = new Element("div", {'class': 'componentBody babyNames clearfix'});
            
            var BabyNameBoxContainerGirl = new Element("div", {'class': 'babyNameBox girl'});
            
            var BabyNameListGirl = new Element("div", {'class': 'babyNameList clearfix'}).adopt(new Element("h4").setText("Girl Names"));
            var girlsOLone = new Element("ol");
            var girlsOLtwo = new Element("ol", {'start': '6'});
            for(var i =0; i < options.json.CityNameRankGirls.length; i++) {
                if(i <= 4) {
                    girlsOLone.adopt(new Element("li").setText(options.json.CityNameRankGirls[i].FirstName.split(" ")[0] /*+ " (" + options.json.CityNameRankGirls[i].Count + ")"*/));
                }else {
                    girlsOLtwo.adopt(new Element("li").setText(options.json.CityNameRankGirls[i].FirstName.split(" ")[0] /*+ " (" + options.json.CityNameRankGirls[i].Count + ")"*/));
                }
            }
            BabyNameListGirl.adopt(girlsOLone, girlsOLtwo);
            BabyNameBoxContainerGirl.adopt(BabyNameListGirl);
            
            var BabyNameBoxContainerBoy = new Element("div", {'class': 'babyNameBox boy'});
            
            var BabyNameListBoy = new Element("div", {'class': 'babyNameList clearfix'}).adopt(new Element("h4").setText("Boy Names"));
            var boysOLone = new Element("ol");
            var boysOLtwo = new Element("ol", {'start': '6'});
            for(var i =0; i < options.json.CityNameRankBoys.length; i++) {
                if(i <= 4) {
                    boysOLone.adopt(new Element("li").setText(options.json.CityNameRankBoys[i].FirstName.split(" ")[0] /*+ " (" + options.json.CityNameRankBoys[i].Count + ")"*/));
                }else {
                    boysOLtwo.adopt(new Element("li").setText(options.json.CityNameRankBoys[i].FirstName.split(" ")[0] /*+ " (" + options.json.CityNameRankBoys[i].Count + ")"*/));
                }
            }
            BabyNameListBoy.adopt(boysOLone, boysOLtwo);
            BabyNameBoxContainerBoy.adopt(BabyNameListBoy);
            
            popUpComponentBody.adopt(BabyNameBoxContainerGirl, BabyNameBoxContainerBoy);
	        popUpComponentContainer.adopt(this.getcreateGoogleMapPopUpsHeader(options.cityName), popUpComponentBody, this.getcreateGoogleMapPopUpsFooter());
	    
	        collection.push({tab: options.cityTab, content: popUpComponentContainer});
	    }
	    if(options.json.HospitalNameRankGirls != null) {
	        var popUpComponentContainer = new Element("div", {'class': 'componentMapCallout'});
    	    var popUpComponentBody = new Element("div", {'class': 'componentBody babyNames clearfix'});
            
            var BabyNameBoxContainerGirl = new Element("div", {'class': 'babyNameBox girl'});
            
            var BabyNameListGirl = new Element("div", {'class': 'babyNameList clearfix'}).adopt(new Element("h4").setText("Girl Names"));
            var girlsOLone = new Element("ol");
            var girlsOLtwo = new Element("ol", {'start': '6'});
            for(var i =0; i < options.json.HospitalNameRankGirls.length; i++) {
                if(i <= 4) {
                    girlsOLone.adopt(new Element("li").setText(options.json.HospitalNameRankGirls[i].FirstName.split(" ")[0] /*+ " (" + options.json.HospitalNameRankGirls[i].Count + ")"*/));
                }else {
                    girlsOLtwo.adopt(new Element("li").setText(options.json.HospitalNameRankGirls[i].FirstName.split(" ")[0] /*+ " (" + options.json.HospitalNameRankGirls[i].Count + ")"*/));
                }
            }
            BabyNameListGirl.adopt(girlsOLone, girlsOLtwo);
            BabyNameBoxContainerGirl.adopt(BabyNameListGirl);
            
            var BabyNameBoxContainerBoy = new Element("div", {'class': 'babyNameBox boy'});
            
            var BabyNameListBoy = new Element("div", {'class': 'babyNameList clearfix'}).adopt(new Element("h4").setText("Boy Names"));
            var boysOLone = new Element("ol");
            var boysOLtwo = new Element("ol", {'start': '6'});
            for(var i =0; i < options.json.HospitalNameRankBoys.length; i++) {
                if(i <= 4) {
                
                    boysOLone.adopt(new Element("li").setText(options.json.HospitalNameRankBoys[i].FirstName.split(" ")[0] /*+ " (" + options.json.HospitalNameRankBoys[i].Count + ")"*/));
                }else {
                    boysOLtwo.adopt(new Element("li").setText(options.json.HospitalNameRankBoys[i].FirstName.split(" ")[0] /*+ " (" + options.json.HospitalNameRankBoys[i].Count + ")"*/));
                }
            }
            BabyNameListBoy.adopt(boysOLone, boysOLtwo);
            BabyNameBoxContainerBoy.adopt(BabyNameListBoy);
            
            popUpComponentBody.adopt(BabyNameBoxContainerGirl, BabyNameBoxContainerBoy);
            
	        popUpComponentContainer.adopt(this.getcreateGoogleMapPopUpsHeader(options.hospitalName), popUpComponentBody, this.getcreateGoogleMapPopUpsFooter());
	    
	        collection.push({tab: options.hospitalTab, content: popUpComponentContainer});
	    }
	    return collection;
	},
	getcreateGoogleMapPopUpsHeader: function(name) {
	    var popUpComponentHeader = new Element("div", {'class': 'componentHeader '});
	    popUpComponentHeader.adopt(new Element("h3").adopt(new Element("span").setText("Top Baby Names at  "), new Element("span", {'class': 'hospitalName'}).setText(name)));
	    return popUpComponentHeader;
	},
	getcreateGoogleMapPopUpsHeaderWithHospitalHeader: function(name, headerText) {
	    var popUpComponentHeader = new Element("div", {'class': 'componentHeader'});
	    popUpComponentHeader.adopt(new Element("h2").setText(headerText));
	    popUpComponentHeader.adopt(new Element("h3").adopt(new Element("span").setText("Top Baby Names at  "), new Element("span", {'class': 'hospitalName'}).setText(name)));
	    return popUpComponentHeader;
	},
	getcreateGoogleMapPopUpsHeaderWithSelectBox: function(hospitals, selectBox, headerText) {
	    var popUpComponentHeader = new Element("div", {'class': 'componentHeader'});
	    selectBox.adopt(new Element("option", {'value': 'n/a'}).setText("Choose a Hospital"));
	    for(var i=0;i<hospitals.length;i++) {
	        selectBox.adopt(new Element("option", {'value': hospitals[i].Id}).setText( hospitals[i].Name));
	    }
	    popUpComponentHeader.adopt(new Element("h2").setText(headerText));
	    popUpComponentHeader.adopt(new Element("h3").adopt(new Element("span").setText("Top Baby Names at  "), selectBox));
	    return popUpComponentHeader;
	},
	getcreateGoogleMapPopUpsFooter: function(lastUpdated) {
	    var popUpComponentFooter = new Element('span');//new Element("div", {'class': 'componentFooter'}).adopt(new Element("p", {'class':'disclaimer'}).adopt(new Element("strong").setText("Disclaimer:"), new Element("span").setText("Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.")));
	    //new Element("span", {'class': 'lastUpdate'}).setText("Last Updated: " + lastUpdated), 
	    return popUpComponentFooter;
	},
	settings: { 
		window: {
			'yes': {
				'width': '46',
				'height': '20'
			},
			'no': {
				'width': '42',
				'height': '20'
			},
			'ok': {
				'width': '43',
				'height': '20'
			},
			'cancel': {
				'width': '63',
				'height': '20'
			}
		}
	}
}