var shopping_list; //this variable will store whole sl created by user by getting the value from sl.do
//example to make sl work
//saveShoppingListAjaxfun() sets the value of shopping_list
//
//'#Adams Super Food Stores |Apples~*~*~*|Apples~*~*~*|Veggie burgers~*~*~*#Abraham & Straus|Vodka~*~*~*|Baby powder~*~*~*|Shad~*~*~*|Salt~*~*~*#ALCO|Salt~*~*~*|Zucchini~*~*~*|Antacid~*~*~*#Adams Super Food Stores |Apples~*~*~*|Apples~*~*~*|Veggie burgers~*~*~*|Veggie burgers~*~*~*|Veggie burgers~*~*~*#Abraham & Straus|Vodka~*~*~*|Baby powder~*~*~*|Shad~*~*~*|American cheese~23~*~sdfdsf#Associated Grocers of Florida|Antidiarrheal~*~*~*#Default Store|Applesauce~23~*~sfs#Associated Food Stores|American cheese~23~*~sdfdsf';
//shopping_list="#Affiliated Food Stores|Fabric softener~*~*~*|Febreez~*~*~*|Floor cleaner~*~*~*|Garbage bags~*~*~*|Glass cleaner~*~*~*|Laundry detergent~*~*~*|Mop head~*~*~*|Spray polish~*~*~*|Toilet cleaner~*~*~*|Toilet cleaning bush~*~*~*#Karns|Paper~8989j~89~asdf adsf k|Pencils~8989j~89~asdf adsf k|Pens ~8989j~89~asdf adsf k|Printer ink~8989j~89~asdf adsf k#Payless|Stamps~*~*~office suppppliex|Staple pin remover~*~*~office suppppliex|Stapler~*~*~office suppppliex|Staples~*~*~office suppppliex|Writing Pad~*~*~office suppppliex#Food Depot|Cups~*~*~food depppppppot|Cutlery~*~*~food depppppppot|Dates~*~*~food depppppppot|Deodorant~*~*~food depppppppot|Desserts~*~*~food depppppppot|Diaper rash cream~*~*~food depppppppot|Dips~*~*~food depppppppot|Dish soap~*~*~food depppppppot|Dishwasher detergent~*~*~food depppppppot#Zuppardo's|Monkfish~zzzz8989~888~zzzzzzz|Mop head~zzzz8989~888~zzzzzzz|Mouthwash~zzzz8989~888~zzzzzzz|Mozzarella cheese~zzzz8989~888~zzzzzzz|Muffins~zzzz8989~888~zzzzzzz|Mushrooms~zzzz8989~888~zzzzzzz|Shortening~zzzz8989~888~zzzzzzz|Shredded Cheese~zzzz8989~888~zzzzzzz|Mustard~zz87889~88889~kkkkkkk|Shrimp~zzzz8989~888~zzzzzzz|Syrup~zzzz8989~888~zzzzzzz|Talcum powder~zzzz8989~888~zzzzzzz|Tangerines~zzzz8989~888~zzzzzzz|Tater tots~zzzz8989~888~zzzzzzz#Affiliated Food Stores|Fabric softener~*~*~*|Febreez~*~*~*|Floor cleaner~*~*~*|Garbage bags~*~*~*|Glass cleaner~*~*~*|Laundry detergent~*~*~*|Mop head~*~*~*|Spray polish~*~*~*|Toilet cleaner~*~*~*|Toilet cleaning bush~*~*~*#Karns|Paper~8989j~89~asdf adsf k|Pencils~8989j~89~asdf adsf k|Pens ~8989j~89~asdf adsf k|Printer ink~8989j~89~asdf adsf k#Payless|Stamps~*~*~office suppppliex|Staple pin remover~*~*~office suppppliex|Stapler~*~*~office suppppliex|Staples~*~*~office suppppliex|Writing Pad~*~*~office suppppliex#Food Depot|Cups~*~*~food depppppppot|Cutlery~*~*~food depppppppot|Dates~*~*~food depppppppot|Deodorant~*~*~food depppppppot|Desserts~*~*~food depppppppot|Diaper rash cream~*~*~food depppppppot|Dips~*~*~food depppppppot|Dish soap~*~*~food depppppppot|Dishwasher detergent~*~*~food depppppppot#Zuppardo's|Monkfish~zzzz8989~888~zzzzzzz|Mop head~zzzz8989~888~zzzzzzz|Mouthwash~zzzz8989~888~zzzzzzz|Mozzarella cheese~zzzz8989~888~zzzzzzz|Muffins~zzzz8989~888~zzzzzzz|Mushrooms~zzzz8989~888~zzzzzzz|Shortening~zzzz8989~888~zzzzzzz|Shredded Cheese~zzzz8989~888~zzzzzzz|Mustard~zz87889~88889~kkkkkkk|Shrimp~zzzz8989~888~zzzzzzz|Syrup~zzzz8989~888~zzzzzzz|Talcum powder~zzzz8989~888~zzzzzzz|Tangerines~zzzz8989~888~zzzzzzz|Tater tots~zzzz8989~888~zzzzzzz#Affiliated Food Stores|Fabric softener~*~*~*|Febreez~*~*~*|Floor cleaner~*~*~*|Garbage bags~*~*~*|Glass cleaner~*~*~*|Laundry detergent~*~*~*|Mop head~*~*~*|Spray polish~*~*~*|Toilet cleaner~*~*~*|Toilet cleaning bush~*~*~*#Karns|Paper~8989j~89~asdf adsf k|Pencils~8989j~89~asdf adsf k|Pens ~8989j~89~asdf adsf k|Printer ink~8989j~89~asdf adsf k#Payless|Stamps~*~*~office suppppliex|Staple pin remover~*~*~office suppppliex|Stapler~*~*~office suppppliex|Staples~*~*~office suppppliex|Writing Pad~*~*~office suppppliex#Food Depot|Cups~*~*~food depppppppot|Cutlery~*~*~food depppppppot|Dates~*~*~food depppppppot|Deodorant~*~*~food depppppppot|Desserts~*~*~food depppppppot|Diaper rash cream~*~*~food depppppppot|Dips~*~*~food depppppppot|Dish soap~*~*~food depppppppot|Dishwasher detergent~*~*~food depppppppot#Zuppardo's|Monkfish~zzzz8989~888~zzzzzzz|Mop head~zzzz8989~888~zzzzzzz|Mouthwash~zzzz8989~888~zzzzzzz|Mozzarella cheese~zzzz8989~888~zzzzzzz|Muffins~zzzz8989~888~zzzzzzz|Mushrooms~zzzz8989~888~zzzzzzz|Shortening~zzzz8989~888~zzzzzzz|Shredded Cheese~zzzz8989~888~zzzzzzz|Mustard~zz87889~88889~kkkkkkk|Shrimp~zzzz8989~888~zzzzzzz|Syrup~zzzz8989~888~zzzzzzz|Talcum powder~zzzz8989~888~zzzzzzz|Tangerines~zzzz8989~888~zzzzzzz|Tater tots~zzzz8989~888~zzzzzzz#Affiliated Food Stores|Fabric softener~*~*~*|Febreez~*~*~*|Floor cleaner~*~*~*|Garbage bags~*~*~*|Glass cleaner~*~*~*|Laundry detergent~*~*~*|Mop head~*~*~*|Spray polish~*~*~*|Toilet cleaner~*~*~*|Toilet cleaning bush~*~*~*#Karns|Paper~8989j~89~asdf adsf k|Pencils~8989j~89~asdf adsf k|Pens ~8989j~89~asdf adsf k|Printer ink~8989j~89~asdf adsf k#Payless|Stamps~*~*~office suppppliex|Staple pin remover~*~*~office suppppliex|Stapler~*~*~office suppppliex|Staples~*~*~office suppppliex|Writing Pad~*~*~office suppppliex#Food Depot|Cups~*~*~food depppppppot|Cutlery~*~*~food depppppppot|Dates~*~*~food depppppppot|Deodorant~*~*~food depppppppot|Desserts~*~*~food depppppppot|Diaper rash cream~*~*~food depppppppot|Dips~*~*~food depppppppot|Dish soap~*~*~food depppppppot|Dishwasher detergent~*~*~food depppppppot#Zuppardo's|Monkfish~zzzz8989~888~zzzzzzz|Mop head~zzzz8989~888~zzzzzzz|Mouthwash~zzzz8989~888~zzzzzzz|Mozzarella cheese~zzzz8989~888~zzzzzzz|Muffins~zzzz8989~888~zzzzzzz|Mushrooms~zzzz8989~888~zzzzzzz|Shortening~zzzz8989~888~zzzzzzz|Shredded Cheese~zzzz8989~888~zzzzzzz|Mustard~zz87889~88889~kkkkkkk|Shrimp~zzzz8989~888~zzzzzzz|Syrup~zzzz8989~888~zzzzzzz|Talcum powder~zzzz8989~888~zzzzzzz|Tangerines~zzzz8989~888~zzzzzzz|Tater tots~zzzz8989~888~zzzzzzz";

//alert('sl= '+shopping_list);
//re-intialize h_occupied_last_page to zero after reaching end of page
var max_page_height=900;//3508 ;  //of each page not of whole printing part
var max_page_width=250;//2480;
var h_occupied_last_page=0;
var sl_store_height=42;
var sl_menu_height=22;
var sl_product_row_height=22;
var pg_num = 0;


var store_style ="font-family:Arial, Helvetica, sans-serif;font-size:20px;color:#606060;font-weight:bold;padding-top:10px";
var menuItem_style = "border-color: black; border-width: 1px 1px 1px 1px; border-style: solid; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#606060; font-weight:bold;padding-top:0px;";
var item_style = "font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#606060; padding-top:0px;";
var otherComments_style="border-color: white; border-width: 0px; border-style: solid; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#606060; width:760px; height:100px;";
var style=".store{"+store_style+"}"+".menu-item{"+menuItem_style+"}"+".item{"+item_style+"}"+".otherComments{"+otherComments_style+"}";
//  var text_style = "font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#606060; font-weight:bold;padding-top:0px;";


//
////alert("start");
//var myPopup = null;
var isNN, isIE;
var myPopup;
if (parseInt(navigator.appVersion.charAt(0))>=4){
    isNN=(window.navigator.appName=="Netscape")?1:0;
    isIE=(window.navigator.appName.indexOf("Microsoft")!=-1)?1:0;
}


//var http=undefined;
http=getHTTPObject();
function email_shopping_list() {
    //  alert('trying to email');
    var shopping_list_div_innerHTML= myPopup.document.getElementById("pageLayoutDiv").innerHTML;
    // to remove the <style> tag from formatted_shopping_list
    var formatted_shopping_list= "<html><head><style>"+style+"</style></head><body>"+shopping_list_div_innerHTML+"</body></html>";
    //alert(formatted_shopping_list);
    formatted_shopping_list=formatted_shopping_list.replace(/class=\"store\"/g,"style=\""+store_style+"\"").replace(/class=\"menu-item\"/g,"style=\""+menuItem_style+"\"").replace(/class=\"item\"/g,"style=\""+item_style+"\"").replace(/class=\"otherComments\"/g,"style=\""+otherComments_style+"\"");
    //alert(formatted_shopping_list);
    var other_comments_ts_id_new_height = myPopup.document.getElementById("other_comments_ts_id").scrollHeight+2;
    formatted_shopping_list=formatted_shopping_list.replace(/height:100px;/g,"height:"+other_comments_ts_id_new_height+"px;");
    //alert(formatted_shopping_list);
    var params =  "formatted_shopping_list="+escape(formatted_shopping_list);
    //alert(params);
    try {
        var url="email_shopping_list.do";
        http.open("POST", url, true);
        http.onreadystatechange=emailShoppingList_handleHttpResponse;
        //   alert("return function set");
        http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        http.setRequestHeader("Content-length", params.length);
        http.setRequestHeader("Connection", "close");
        //alert("sending now");
        http.send(params);
        //alert("sent");
    } catch (e) {
        myPopup.document.getElementById("msg_loc_1").innerHTML="error"; //message location 1
    }//end catch
}

function emailShoppingList_handleHttpResponse(){
    //alert("in emailShoppingList_handleHttpResponse, response obtained. http.readyState is "+http.readyState+", http.status is : "+http.status);
    if(http.readyState==4) {
        if(http.status==200) {
            //alert("http.responseText is : "+http.responseText);
            emailShoppingList_handleResponseFromServer(http.responseText); 
        }
        else{
            myPopup.document.getElementById("msg_loc_1").innerHTML=getMessage(128); //message location 1
        }
    }
}


function emailShoppingList_handleResponseFromServer(data){
    //alert("data is : "+data+", getMessage(data) is :"+getMessage(data));
    myPopup.document.getElementById("msg_loc_1").innerHTML=getMessage(parseInt(data.trim())); //message location 1
}

function openPrintPopup(){
    //      alert("openPrintPopup");
    //reset the variables
    myPopup=null;
    max_page_height=900;//3508 ;  //of each page not of whole printing part
    max_page_width=250;//2480;
    h_occupied_last_page=0;
    sl_store_height=42;
    sl_menu_height=25;
    sl_product_row_height=25;
    pg_num = 0;
    // alert("values resetting done");
   
    if (isNN){
        myPopup=window.open("","" ,"width=800,height450,toolbar=yes,location=no,directories=no,status=no,menubar=yes, scrollbars=yes,resizable=yes,copyhistory=no");
    }
    else if (isIE) {
        myPopup=window.open("","","width=800,height450,toolbar=yes,location=no,directories=no,status=no,menubar=no, scrollbars=yes,resizable=yes,copyhistory=no");
        myPopup.document.createStyleSheet().addRule(".store",store_style);
        myPopup.document.createStyleSheet().addRule(".menu-item",menuItem_style);
        myPopup.document.createStyleSheet().addRule(".item",item_style);
        myPopup.document.createStyleSheet().addRule(".otherComments",otherComments_style);
        // myPopup.document.createStyleSheet().addRule(".text",text_style);
        //      alert("finished putting stylesheets for ie");
    }
    else { //opera,chrome etc
        myPopup=window.open("","","width=800,height450,toolbar=yes,location=no,directories=no,status=no,menubar=no, scrollbars=yes,resizable=yes,copyhistory=no"); 
    }
    
    // uncomment the follwing line to debug in firebug
    //myPopup=this.window;   

    
    //  alert(myPopup.document.body);
    myPopup.document.title='www.list2shop.com';
    //alert(myPopup.document.title);
    // var styleElement = document.createElement("style");
    //styleElement.innerHTML=style;
    // alert(myPopup.document.styleSheetList);
    myPopup.document.body.innerHTML="<style>"+style+"</style><table><tr><td><div id='msg_loc_1'>&nbsp;</div></td></tr><tr><td><img align='right' src='http://"+window.location.hostname+":"+window.location.port+"/images/print_shopping_list.jpg' onclick='print()'/></td></tr><tr><td><div id='pageLayoutDiv'/></td></tr></table>";
    // set the email div as blank, if the user is not logged in, i.e there is no user_email variable.
    // alert("user_email");
    //   alert(user_email);
    if(user_email==undefined){
        myPopup.document.getElementById("msg_loc_1").innerHTML="";
    }   
    print_sl_onload();
}

function print_sl_onload(){
    populate_page_layout();
    //alert('print_sl_onload(), pg_num= '+pg_num);
    if(pg_num!=0){
        populate_images();
        populate_shopping_list_2(); 
    }
    changeOtherCommentsHeight();
    removeLastPageBreak();   
    /*
     * TODO: try dynamically putting page breaks, so that, the last sl-page wouldn't have the page break.
     alert(pg_num);
    //put page breaks
    for (var i=1;i<pg_num;i++){ // put page break after all but the last div
        //alert('hello');
        myPopup.document.getElementById("pageTable_pg_"+i).setAttribute("style", "page-break-after:always");
        alert(myPopup.document.getElementById("pageTable_pg_"+i).attributes[0].value);    
    }
     */
    //open printmenu
    // myPopup.print();
    //alert(myPopup.document.body.innerHTML);
}




// get the value of a property of a CSS Rule
function getClassProperty(sClassName,sProperty) {
    sClassName="."+sClassName;
    var sheets = myPopup.document.styleSheets;
    var rules;
    var styleObj;
    for (i=0;i< sheets.length; i++) {
        rules=sheets[i].cssRules || sheets[i].rules;
        for (var j=0; j<rules.length; j++) {
            if (rules[j].selectorText && rules[j].selectorText==sClassName) {
                styleObj=rules[j].style;

                return styleObj[sProperty];
            }
        }
    }
}

// set the value of a property of a CSS Rule
function changeClassProperty(sClassName,sProperty,sValue) {
    sClassName="."+sClassName;
    var sheets = myPopup.document.styleSheets;
    var rules;
    var styleObj;
    for (i=0;i< sheets.length; i++) {
        rules=sheets[i].cssRules || sheets[i].rules;
        for (var j=0; j<rules.length; j++) {
            if (rules[j].selectorText && rules[j].selectorText==sClassName) {
                styleObj=rules[j].style;
                styleObj[sProperty]=sValue;
                break;
            }
        }
    }
}


function changeOtherCommentsHeight(){
    var other_comments_ts_id = myPopup.document.getElementById("other_comments_ts_id");
    //alert(other_comments_ts_id.scrollHeight);
    //alert(getClassProperty("otherComments", "height"));
    changeClassProperty("otherComments", "height", (other_comments_ts_id.scrollHeight+2)+"px");
    //alert(getClassProperty("otherComments", "height"));
    //other_comments_ts_id.style.height=(other_comments_ts_id.scrollHeight+2)+"px";
    //alert(other_comments_ts_id.style.height);
}

function removeLastPageBreak(){
    //alert("trying to remove last page break, pg_num is : "+pg_num);
    //get the parent div and the child div
    pageLayoutDiv = myPopup.document.getElementById("pageLayoutDiv");
    lastPageBreakDiv = myPopup.document.getElementById("pageBreakDiv_pg_"+pg_num);
    //alert(pageLayoutDiv.innerHTML);
    //alert(lastPageBreakDiv.innerHTML);
    pageLayoutDiv.removeChild(lastPageBreakDiv);
    //alert("done");
}
      
function populate_page_layout(){
    pg_num = pg_num+1;   
    h_occupied_last_page=0;
    var  pageTable = '<div><table id="pageTable_pg_'+pg_num+'" border="0" width="100%" cellspacing="0" cellpadding="0"><tr><td colspan="0"><div id="imagesAtTopDiv'+pg_num+'"><table border="0" width="100%" cellspacing="0" cellpadding="0"><tr><td><div id="imgDiv1_pg'+pg_num+'"></div></td><td><div id="imgDiv2_pg'+pg_num+'"></div></td><td><div id="imgDiv3_pg'+pg_num+'"></div></td></tr></table></div></td></tr><tr><td colspan="0" width="100%"><table cellpadding="0" cellspacing="0"  border="0" width="100%"><tr><td><div id="sl_Div1pg'+pg_num+'" /></td></tr></table></td></tr><tr><td><div id="imagesInMiddleDiv'+pg_num+'"><table border="0" width="100%" cellspacing="0" cellpadding="0"><tr><td ><div id="imgDiv4_pg'+pg_num+'"></div></td><td ><div id="imgDiv5_pg'+pg_num+'" ></div></td><td ><div id="imgDiv6_pg'+pg_num+'"></div></td></tr></table></div></td></tr><tr><td  colspan="0" width="100%"><table cellpadding="0" cellspacing="0" border="0" width="100%" ><div id="sl_Div2pg'+pg_num+'" ></div></table></td></tr><tr><td><div id="imagesAtBottomDiv'+pg_num+'" ><table border="0" width="100%" cellspacing="0" cellpadding="0"><tr><td ><div id="imgDiv7_pg'+pg_num+'"></div></td><td ><div id="imgDiv8_pg'+pg_num+'" ></div></td><td ><div id="imgDiv9_pg'+pg_num+'"></div></td></tr></table></div></td></tr></table></div><div id="pageBreakDiv_pg_'+pg_num+'" style="page-break-after:always">';                                
    var htmlDiv=myPopup.document.getElementById("pageLayoutDiv");
    //alert("innerhtml: "+htmlDiv.innerHTML+" div: "+htmlDiv);
    //alert(pageTable);
    //alert("page no . "+pg_num);
    if (htmlDiv!=null){
        h_occupied_last_page=h_occupied_last_page+25; //to leave some space 
        //var put_pg_break='<table><tr style="page-break-before: always;"></tr></table>';
        htmlDiv.innerHTML=htmlDiv.innerHTML+pageTable;//+put_pg_break+tempTable;
        //alert(htmlDiv.innerHTML);    
    }
}
function maxHeightOfImgRow(div1,div2,div3){
    var div1Height=myPopup.document.getElementById(div1)
    if(div1Height!=null){
        div1Height=div1Height.offsetHeight;
    }else{div1Height=0;}
    var div2Height=myPopup.document.getElementById(div2)
    if(div2Height!=null){
        div2Height=div2Height.offsetHeight;
    }else{div2Height=0;}
    var div3Height=myPopup.document.getElementById(div3);
    if(div3Height!=null){
        div3Height=div3Height.offsetHeight;
    }else{div3Height=0;}
    var divH;
    if (div1Height >= div2Height){
        divH=div1Height;
        if(div3Height>=divH){
            return div3Height;
        }else{
            return divH;
        }
    } else if (div1Height <= div2Height){
        divH=div2Height;
        if(div3Height>=divH){
            return div3Height;
        }else{
            return divH;
        }
    }
}




function populate_shopping_list_2(){
    //alert("trying to populate sl");
    shopping_list=prepareSLStringToPrint();
    //alert('shopping_list IS : '+shopping_list);
    if(shopping_list!=null)
    {
        var divObj = myPopup.document.getElementById('sl_Div1pg'+pg_num);
        
        // befor trying to break the string, just check that there are any products/stores/items or not.
        // it is possible to have just one other comment.
        if(shopping_list.indexOf("~")==0){// if the sl string starts with ~, it means there is just one other_comment, and nothing else.
            var other_comments = shopping_list.substring(1);
            //alert("time to put other comments : "+other_comments); 
            var other_comments_header_row = myPopup.document.createElement("div");
            other_comments_header_row.id="other_comments_header_row";
            divObj.appendChild(other_comments_header_row);
            other_comments_header_row.innerHTML='<table class="store"><tr><td>Other Comments</td></tr></table>';
            var other_comments_row = myPopup.document.createElement("div");
            other_comments_row.id="other_comments_row";
            divObj.appendChild(other_comments_row);
            other_comments_row.innerHTML='<table><tr><td><textarea id="other_comments_ts_id" class="otherComments">'+other_comments+'</textarea></td></tr></table>';
                   
        }
        
        
        if(divObj!=null) {
            var sl_break1_arr; //break sl having string with store name and its products
            var sl_break2_arr; //break products of same store  having each row as product with other details.
            var sl_break3_arr;  //break to get detail of each product as product name, qty, price and comments
            var store, product, qty, price, comment;
                   
            sl_break1_arr=breakString(shopping_list,"\\","#");
            for(var i=1;i<sl_break1_arr.length;) //starting from i=i because before first '#' value is blank 
            {
                var h_with_requiredH=h_occupied_last_page+sl_store_height+sl_menu_height+sl_product_row_height;
                sl_break2_arr=breakString(sl_break1_arr[i],"\\","|");
                var store=deEscape(sl_break2_arr[0],"\\"); //first is store name and remaining are product within it including other details of that
                //alert('start for, h_with_requiredH= '+h_with_requiredH+'h_occupied_last_page'+h_occupied_last_page); //+'  max_height_ofLastPg= '+max_height_ofLastPg);
                if(h_with_requiredH > max_page_height ) { 
                    //insert page break 
                    populate_page_layout();
                    //alert('store_name to next page, pg_num= '+pg_num);
                    if(pg_num >= 2){
                        populate_images();
                        divObj= myPopup.document.getElementById('sl_Div1pg'+pg_num);
                        // alert('divObj= '+divObj+'');
                               
                    }
                }
                var storeDiv = myPopup.document.createElement("div");
                storeDiv.id="store"+'_'+i; //i is used to track the store number and making id value of storeDiv differ with every new store.
                divObj.appendChild(storeDiv);
                storeDiv.innerHTML = '<table class="store"><tr><td>'+store+'</td></tr></table>';
                           
                var menuDiv =myPopup.document.createElement("div");
                menuDiv.id="menu"+'_'+i;
                divObj.appendChild(menuDiv);
                menuDiv.innerHTML = '<table class="menu-item"><tr><td width="20px"></td><td width="200px">Product</td><td width="100px">Qty</td><td width="100px">Price</td><td width="360px">Comments</td></tr></table>';
                h_occupied_last_page=h_occupied_last_page+sl_store_height+sl_menu_height;
                for(var j=1;j<sl_break2_arr.length;)
                {  
                    sl_break3_arr=breakAndDeEscape(sl_break2_arr[j], "\\", "~");
                    var product = sl_break3_arr[0];
                    qty = sl_break3_arr[1];
                    price = sl_break3_arr[2];
                    comment=sl_break3_arr[3];
                    if(qty=="*"){ 
                        qty="";
                    }
                    if(price=="*"){
                        price="";
                    }
                    if(comment=="*") {
                        comment="";
                    }
                    h_with_requiredH=h_occupied_last_page+sl_product_row_height;
                    //alert('2nd for of product, h_with_requiredH= '+h_with_requiredH+'h_occupied_last_page'+h_occupied_last_page);
                    if(h_with_requiredH > max_page_height ) { 
                        //insert page break with store name(continue) if more prod are there, menu below store and product(s) in it.
                        populate_page_layout();
                        //alert('pg_num= '+pg_num);
                        if(pg_num >= 2){
                            populate_images();
                            divObj=myPopup.document.getElementById('sl_Div1pg'+pg_num);
                            storeDiv = myPopup.document.createElement("div");
                            // alert('print next page with store name')
                            storeDiv.id="store_nextpg"+'_'+i;
                            divObj.appendChild(storeDiv);
                            storeDiv.innerHTML = '<table class="store"><tr><td>'+store+' (continued...)</td></tr></table>';
                            menuDiv = myPopup.document.createElement("div");                            
                            menuDiv.id="menu_nextpg"+'_'+i;
                            divObj.appendChild(menuDiv);
                            menuDiv.innerHTML = '<table class="menu-item"><tr><td width="20px"></td><td width="200px">Product</td><td width="100px">Qty</td><td width="100px">Price</td><td width="360px">Comments</td></tr></table>';
                            h_occupied_last_page=h_occupied_last_page+sl_store_height+sl_menu_height;
                        }
                               
                    }
                        
                    var itemsrow = myPopup.document.createElement("div");   
                    itemsrow.id="item"+'_'+j;
                    divObj.appendChild(itemsrow);
                    itemsrow.innerHTML = '<table class="item"><tr><td width="20"><input type="checkbox" disabled="disabled"/></td><td width="200">'+product+'</td><td width="100">'+qty+'</td><td width="100">'+price+'</td><td width="360">'+comment+'</td></tr></table>';
                    if(sl_break3_arr.length>=5){
                        var other_comments = sl_break3_arr[4];
                        //alert("time to put other comments : "+other_comments); 
                        var other_comments_header_row = myPopup.document.createElement("div");
                        other_comments_header_row.id="other_comments_header_row";
                        divObj.appendChild(other_comments_header_row);
                        other_comments_header_row.innerHTML='<table class="store"><tr><td>Other Comments</td></tr></table>';
                        var other_comments_row = myPopup.document.createElement("div");
                        other_comments_row.id="other_comments_row";
                        divObj.appendChild(other_comments_row);
                        other_comments_row.innerHTML='<textarea id="other_comments_ts_id" class="otherComments">'+other_comments+'</textarea>';
                    }
                    h_occupied_last_page=h_occupied_last_page+sl_product_row_height;
                   
                    //alert('store= '+store+' ,product= '+product+' ,qty= '+qty+' ,comment= '+comment);
                    j++;
                }//end for
                i++;
            }
        }
    }
}


// not used any more. populate_shopping_list_2() is used instead, which breaksAndDescapes
function populate_shopping_list(){ //(fH,tH,fW,tW){
    //alert('shopping_list IS : '+shopping_list);
    if(shopping_list!=null)
    {   
        var divObj = myPopup.document.getElementById('sl_Div1pg'+pg_num);   //within this div child divs are appended.
        if(divObj!=null) {
            var sl_break1_arr; //break sl having string with store name and its products
            var sl_break2_arr; //break products of same store  having each row as product with other details.
            var sl_break3_arr;  //break to get detail of each product as product name, qty, price and comments
            var store, product, qty, price, comment;
                   
            sl_break1_arr=shopping_list.split("#");
            for(var i=1;i<sl_break1_arr.length;) //starting from i=i because before first '#' value is blank 
            {
                var h_with_requiredH=h_occupied_last_page+sl_store_height+sl_menu_height+sl_product_row_height;
                sl_break2_arr=sl_break1_arr[i].split("|");
                store=sl_break2_arr[0]; //first is store name and remaining are product within it including other details of that
                //alert('start for, h_with_requiredH= '+h_with_requiredH+'h_occupied_last_page'+h_occupied_last_page); //+'  max_height_ofLastPg= '+max_height_ofLastPg);
                if(h_with_requiredH > max_page_height ) { 
                    //insert page break 
                    populate_page_layout();
                    //alert('store_name to next page, pg_num= '+pg_num);
                    if(pg_num >= 2){
                        populate_images();
                        divObj= myPopup.document.getElementById('sl_Div1pg'+pg_num);
                        // alert('divObj= '+divObj+'');
                               
                    }
                }
                var storeDiv = myPopup.document.createElement("div");
                storeDiv.id="store"+'_'+i; //i is used to track the store number and making id value of storeDiv differ with every new store.
                divObj.appendChild(storeDiv);
                storeDiv.innerHTML = '<table class="store"><tr><td>'+store+'</td></tr></table>';
                           
                var menuDiv =myPopup.document.createElement("div");
                menuDiv.id="menu"+'_'+i;
                divObj.appendChild(menuDiv);
                menuDiv.innerHTML = '<table class="menu-item"><tr><td width="20px"></td><td width="200px">Product</td><td width="100px">Qty</td><td width="100px">Price</td><td width="360px">Comments</td></tr></table>';
                h_occupied_last_page=h_occupied_last_page+sl_store_height+sl_menu_height;
                for(var j=1;j<sl_break2_arr.length;)
                {  
                    sl_break3_arr=sl_break2_arr[j].split("~");
                    product = sl_break3_arr[0];
                    qty = sl_break3_arr[1];
                    price = sl_break3_arr[2];
                    comment=sl_break3_arr[3];
                    if(qty=="*"){ 
                        qty="";
                    }
                    if(price=="*"){
                        price="";
                    }
                    if(comment=="*") {
                        comment="";
                    }
                    h_with_requiredH=h_occupied_last_page+sl_product_row_height;
                    //alert('2nd for of product, h_with_requiredH= '+h_with_requiredH+'h_occupied_last_page'+h_occupied_last_page);
                    if(h_with_requiredH > max_page_height ) { 
                        //insert page break with store name(continue) if more prod are there, menu below store and product(s) in it.
                        populate_page_layout();
                        //alert('pg_num= '+pg_num);
                        if(pg_num >= 2){
                            populate_images();
                            divObj=myPopup.document.getElementById('sl_Div1pg'+pg_num);
                            storeDiv = myPopup.document.createElement("div");
                            // alert('print next page with store name')
                            storeDiv.id="store_nextpg"+'_'+i;
                            divObj.appendChild(storeDiv);
                            storeDiv.innerHTML = '<table class="store"><tr><td>'+store+' (continued...)</td></tr></table>';
                            menuDiv = myPopup.document.createElement("div");                            
                            menuDiv.id="menu_nextpg"+'_'+i;
                            divObj.appendChild(menuDiv);
                            menuDiv.innerHTML = '<table class="menu-item"><tr><td width="20px"></td><td width="200px">Product</td><td width="100px">Qty</td><td width="100px">Price</td><td width="360px">Comments</td></tr></table>';
                            h_occupied_last_page=h_occupied_last_page+sl_store_height+sl_menu_height;
                        }
                               
                    }
                        
                    var itemsrow = myPopup.document.createElement("div");   
                    itemsrow.id="item"+'_'+j;
                    divObj.appendChild(itemsrow);
                    itemsrow.innerHTML = '<table class="item"><tr><td width="20"><input type="checkbox" disabled="disabled"/></td><td width="200">'+product+'</td><td width="100">'+qty+'</td><td width="100">'+price+'</td><td width="360">'+comment+'</td></tr></table>';
                    h_occupied_last_page=h_occupied_last_page+sl_product_row_height;
                   
                    //alert('store= '+store+' ,product= '+product+' ,qty= '+qty+' ,comment= '+comment);
                    j++;
                }//end for
                i++;
            }
        }
    }
}
function populate_images(){
    var toPutLogo = true;
    //imgString='pg_numA~urlA|locationA$urlB|locationB$urlC|locationC#pg_numB~urlD|locationD$urlE|locationE';
    //imgString= '#1~/images/main_logo.jpg|1$/images/hand_small.jpg|7$/images/my_options_active_link.jpg|9#2~/images/main_logo.jpg|1$/images/main_logo.jpg|2$/images/main_logo.jpg|3$/images/main_logo.jpg|9#4~/images/main_logo.jpg|1$/images/main_logo.jpg|1$/images/main_logo.jpg|9';
    var imgString = userImageString; //userImageString is defined in shopping_list.jsp
    var break1_arr; //break sl having string with store name and there products
    var break2ForPgNum; //break products of same store  having each row as product with other details.
    var break3ForImg;  //break to get detail of each product as product name, qty, price and comments
    var break4ForImgDetails
    break1_arr=imgString.split("#");
    for(var i=1;i<break1_arr.length;i++ ) //starting from i=i because before first '#' value is blank 
    {
        break2ForPgNum=break1_arr[i].split("~");
        ImgPg_num = break2ForPgNum[0];
        if(pg_num==ImgPg_num){
            for(var j=1;j<break2ForPgNum.length;j++ ) //starting from i=1 because before first '#' value is blank 
            {
                break3ForImg=break2ForPgNum[j].split("$");
                for(var k=0;k<break3ForImg.length;k++){
                    break4ForImgDetails=break3ForImg[k].split("|");
                    ImgUrl=break4ForImgDetails[0];
                    ImgLocation=break4ForImgDetails[1];
                    if (ImgLocation==1){// image for location found, so set toPutLogo as false
                        // alert(pg_num+":"+toPutLogo);
                        toPutLogo=false;
                    }
                    populate_image(ImgLocation,ImgUrl,ImgPg_num); 
                }
            }
        }
    }
    
    // now all the images for the page has been put, put the logo if reqd.
    if(toPutLogo==true){
        // alert('put logo at : '+pg_num); 
        populate_image(1,"/images/main_logo.jpg",pg_num); 
    }
    
    var topDivHeight=maxHeightOfImgRow('imgDiv1_pg'+pg_num,'imgDiv2_pg'+pg_num,'imgDiv3_pg'+pg_num);
    var middleDivHeight  = maxHeightOfImgRow('imgDiv4_pg'+pg_num,'imgDiv5_pg'+pg_num,'imgDiv6_pg'+pg_num);
    var bottomDivHeight  = maxHeightOfImgRow('imgDiv7_pg'+pg_num,'imgDiv8_pg'+pg_num,'imgDiv9_pg'+pg_num);
    //calculate height for all the div with  than free space in middle of page 
    h_occupied_last_page=topDivHeight+ middleDivHeight +bottomDivHeight;
}
function  populate_image(ImgLocation,ImgUrl,ImgPg_num){
    ImgUrl = "http://"+window.location.hostname+":"+window.location.port+ImgUrl;    
    // alert(ImgUrl);
    if(ImgPg_num == pg_num){
        var imgDiv = myPopup.document.getElementById('imgDiv'+ImgLocation+'_pg'+pg_num); 
        if(imgDiv!=null){
            if(ImgLocation== 1 ||ImgLocation==4 || ImgLocation==7){
                imgDiv.innerHTML='<table border="0" width="100%" cellspacing="0" cellpadding="0"><tr><td align="left"><img src="'+ImgUrl+'"/></td></tr></table>';
            }
            if(ImgLocation== 2 ||ImgLocation==5 || ImgLocation==8){
                imgDiv.innerHTML='<table border="0" width="100%" cellspacing="0" cellpadding="0"><tr><td align="center"><img src="'+ImgUrl+'"/></td></tr></table>';
            }
            if(ImgLocation== 3 ||ImgLocation==6 || ImgLocation==9){
                imgDiv.innerHTML='<table border="0" width="100%" cellspacing="0" cellpadding="0"><tr><td align="right"><img src="'+ImgUrl+'"/></td></tr></table>';
            }
        }
    } 
    
    
    function preloadImages(){
        //alert(userImageString);
           
    }
    
   
}