//*********************************************************************************************
//*************************************** Global Variables ************************************
//*********************************************************************************************
var textPadding = 50;
var maxTextWidth = 420;
var pmaxTextWidth = 0;
var canvasTop = 104;
var canvasLeft = 1;
var canvasHeight = 310;
var pcanvasHeight = 0;
var canvasWidth = 420;
var pcanvasWidth = 0;
var texttop = 50;
var textLeft = 50;
var textsize = 30;  
var fontsize = '1'; 
var fontstyle = '1';
var textlocation = '1';
var oldTextColorHash;
var previewscale = 100;
var previewTop = 0;
var previewLeft = 0;
var pTextHeight = 1;
var textonly = false;
var browser = 'IE';
var pTextTopOffset = 0;

function initCanvas() {           
    if (document.getElementById('TextBox1').value == "TEXT") { 
        textonly = true;
        document.getElementById('Tab3').src = 'designs/cache/canvas/layout_disabled.gif';
    }

    // first thing send off the rendering request
    if (!textonly) {
        document.getElementById("Image1").src = document.getElementById("txtDesignImageURL").value;        
    }

    setBrowserType();
    
    // canvas
	document.getElementById("canvas_image").src = setCanvasColor();	
    fontsize = document.getElementById("txtFontSize").value;
    fontstyle = document.getElementById("txtFontStyle").value;
    textlocation = document.getElementById("txtFontLayout").value;
    
    //**** temp patch for layout issue - remove after 7-14 release
    var li_Location = new Number(textlocation)
    if (li_Location == 0) {
        textlocation = '1';             
        document.getElementById("txtFontLayout").value = '1';
    }
    //**** temp patch for layout issue - remove after 7-14 release
    
    // setup radio buttons
    document.getElementById("radFontSmall" + fontsize).checked = true;
    if (fontstyle=='1') document.getElementById('radTypeBlock').checked = true;
    if (fontstyle=='2') document.getElementById('radTypeFancy').checked = true;
    if (fontstyle=='3') document.getElementById('radTypeScript').checked = true;
    
    if (textlocation == '1') {
        document.getElementById('radLayout1').checked = true;
    }
    else {
        document.getElementById('radLayout2').checked = true;
    }        
    textsize = fontHeight(fontsize, fontstyle);             
    window.setTimeout("imageTimer()",100);  
    
    // preload critical images
    cacheRolloverImages();
    cacheGarmentImages();           
    cacheFont();
}
//*********************************************************************************************
//******************************* Builds Each line of text ************************************
//*********************************************************************************************
function buildText(textline, truncate) { 
	
	var i;
	var imageNumber = 0;
	var imageId;
	var pImageId;
	var graphicID;
	var width = 0;
	var pwidth = 0;
	var imageFolder = 'designs/font/';
	var fontforecolor;
	var fontbackcolor;
	var fontSubFolder = fontsize + '_' + fontstyle + '/';	
	var returnvalue = true;
		
	// get stuff from the line of text
	var intext = document.getElementById('Line' + textline).value;	
    
	// filter the input string to remove chars we cant use
	intext = filterString(intext);	
	document.getElementById('Line' + textline).value = intext;	
	
	// make sure this line will fit
	if (!willFitCanvas(fontstyle, fontsize)) {
	
	    // one at a time delete a line of text 
	    if (document.getElementById('Line3').value.length > 0) document.getElementById('Line3').value = '';  
	    
	    if (!willFitCanvas(fontstyle, fontsize)) { 
	        if (document.getElementById('Line2').value.length > 0) document.getElementById('Line2').value = '';  
	    }

	    if (!willFitCanvas(fontstyle, fontsize)) { 
	        if (document.getElementById('Line1').value.length > 0) document.getElementById('Line1').value = '';  
	    }
	    alert('User supplied text must fit within the design area.');
	}
	
	// check the width of the text
	width = 0;
	var numchars = 0;		    
    width = willFitWidth(intext, fontsize, fontstyle);
        
	if (truncate) {
		if (width > 0) {		      		    		    
		    document.getElementById('Line' + textline).value = intext.slice(0,width+1);
		    intext = document.getElementById('Line' + textline).value;  	        		        
		}
	}
	else {	    
		if (width > 0) {		    
		    returnvalue = false;		    
		}
	}    
	
	if (returnvalue) { 	
	
	        // get the font colorings
	        fontforecolor = document.getElementById('Thread100').value;
	        fontbackcolor = document.getElementById('Thread99').value;
	        fontforecolor = fontforecolor.substring(1,7);
	        fontbackcolor = fontbackcolor.substring(1,7);
        	
	        for(i=0; i <= intext.length-1; i++) {
        		
		            imageId = 'imgLine' + textline + i;
		            pImageId = 'imgPLine' + textline + i;
		            graphicID = intext.charCodeAt(i) + '_' + fontforecolor + '_' + fontbackcolor + '_' + fontsize + '_' + fontstyle + '.jpg';			
        		
		            document.getElementById(imageId).src = imageFolder + fontSubFolder + graphicID;
		            document.getElementById(pImageId).src = imageFolder + fontSubFolder + graphicID;					
		            document.getElementById(imageId).style.display = 'inline';
		            document.getElementById(pImageId).style.display = 'inline';		
		        }						
        		
		        width = 0;
	            for(i=0; i <= intext.length-1; i++) {	
		            imageId = 'imgLine' + textline + i;
		            width = width + document.getElementById(imageId).width;		
		            pwidth = pwidth + document.getElementById(pImageId).width;
        		    
		                if (truncate) {
		                    if (width >=400) {		      
		                        document.getElementById(imageId).style.display = 'none';
		                        document.getElementById(pImageId).style.display = 'none';
		                        document.getElementById('Line' + textline).value = intext.slice(0,i);
		                        alert('All text must fit within the work area.');		        		        
		                    }
		                }
		                else {
		                    if (width >=400) {
		                        returnvalue = false;
		                    }
		                }
		            }
        		    
	        // clear out the empty image controls
	        for(i=intext.length; i<=19; i++) {
		            imageId = 'imgLine' + textline + i;
		            pImageId = 'imgPLine' + textline + i;		    
		            document.getElementById(imageId).style.display = 'none';		
		            document.getElementById(pImageId).style.display = 'none';		
		        }
        					
	        // re-center the text 			
	        //document.getElementById('PreviewLine' + textline + 'Div').style.left = previewLeft + ((pmaxTextWidth/2) - (pwidth/2));

            resize();
            return returnvalue;
        }
	}
	
function setCanvasColor() {

    fontbackcolor = document.getElementById('Thread99').value;
    var canvasStyle = document.getElementById('txtCanvasStyle').value;
    
	switch (fontbackcolor) {
	
		case '#666666':
			return 'designs/cache/canvas/' + canvasStyle + 'canvas_lg_black.gif';
			break;
		case '#0000CC':
			return 'designs/cache/canvas/' + canvasStyle + 'canvas_lg_dkblue.gif';
			break;
		case '#336633':
			return 'designs/cache/canvas/' + canvasStyle + 'canvas_lg_dkgreen.gif';
			break;
		case '#9999FF':
			return 'designs/cache/canvas/' + canvasStyle + 'canvas_lg_ltblue.gif';
			break;
		case '#CC9966':
			return 'designs/cache/canvas/' + canvasStyle + 'canvas_lg_khaki.gif';
			break;
		case '#CC99CC':
			return 'designs/cache/canvas/' + canvasStyle + 'canvas_lg_purple.gif';
			break;
		case '#FFFF33':
			return 'designs/cache/canvas/' + canvasStyle + 'canvas_lg_yellow.gif';
			break;
		case '#FF99CC':
			return 'designs/cache/canvas/' + canvasStyle + 'canvas_lg_pink.gif';
			break;
		case '#E7E7E7':
			return 'designs/cache/canvas/' + canvasStyle + 'canvas_lg_white.gif';
			break;	
		}
	}	

//*********************************************************************************************
//******************************** Product Preview Functions **********************************
//*********************************************************************************************
function doRollover(name, rollover_image) { 
	clearProductRollover();
	document.getElementById(name).src = 'designs/cache/canvas/' + rollover_image;

	var w = document.getElementById('Image1').width;
	var h = document.getElementById('Image1').height;
	var i;
	var t;
	var imageName;
	var pImageName
	var fontbackcolor = document.getElementById('Thread99').value.substring(1,7);	
	document.getElementById('message').style.display = 'none'
	
	// copy the rendered image
	//document.getElementById('preview').src = document.getElementById('Image1').src;	    
	
	switch (name) { 
		case 'shirt_rollover':
		    document.getElementById('productImage').src = 'designs/cache/canvas/polo_' + fontbackcolor +'.gif';
		    
		    // set scaling params
		    if (browser == 'FF'){
                previewscale = 17;
                previewLeft = 620;
	            previewTop = 212;	           		    
		        }
		    else {
                previewscale = 17;
                previewLeft = 615;
	            previewTop = 212;	            
	        }
	        
	        if (textlocation == '1') {
	            pTextTopOffset = -4;
	        }
	        else {
	            pTextTopOffset = -4;
	        }
	        
		    break;
		
		case 'hat_rollover':
		    document.getElementById('productImage').src = 'designs/cache/canvas/hat_' + fontbackcolor + '.gif';
		
		    // copy the rendered image
		    //document.getElementById('preview').src = document.getElementById('Image1').src;
		    
		    // set scaling params		    	
		    if (browser == 'FF'){		        
                previewscale = 31;
                previewLeft = 539;
	            previewTop = 170;		  
		        }
		    else {		     		   
                previewscale = 31;
                previewLeft = 530;
	            previewTop = 170;
	            }

	        if (textlocation == '1') {
	            pTextTopOffset = -1;
	        }
	        else {
	            pTextTopOffset = -1;
	        }	            
	        
	        if (!willFitHat(fontstyle,fontsize)) {
	            document.getElementById('message').style.display = 'inline'	
	            if (browser == 'FF'){
	                document.getElementById('message').style.left = 478
	            }
	            else {
	                document.getElementById('message').style.left = 468
	            }
	                        
	        }

		    break;

		case 'jacket_rollover':
		    document.getElementById('productImage').src = 'designs/cache/canvas/jacket_' + fontbackcolor + '.gif';
		    
		    // set scaling params		    	
		    if (browser == 'FF'){
                previewscale = 15;
                previewLeft = 615;
	            previewTop = 195;	            		    
		        }
		    else {
                previewscale = 15;
                previewLeft = 610;
	            previewTop = 200;	            
	            }

	        if (textlocation == '1') {
	            pTextTopOffset = -5;
	        }
	        else {
	            pTextTopOffset = -5;
	        }	            
		    break;

		case 'bag_rollover':
		    document.getElementById('productImage').src = 'designs/cache/canvas/bag_' + fontbackcolor + '.gif';
		    
		    // set scaling params		    
		    if (browser == 'FF'){
                previewscale = 20;
                previewLeft = 565;
	            previewTop = 275;		    
		        }
		    else {		    
                previewscale = 20;
                previewLeft = 550;
	            previewTop = 280;
	            }
	            
	        if (textlocation == '1') {
	            pTextTopOffset = -3;
	        }
	        else {
	            pTextTopOffset = -3;
	        }	            
		    break;
	}
	
	// scale and position the preview image
    document.getElementById("preview").width = ((w/100) * previewscale);
	document.getElementById("preview").height = ((h/100) * previewscale);	
    document.getElementById("preview").style.left = previewLeft;
	document.getElementById("preview").style.top = previewTop;
	
	// rescale the letters to match the preview image 
	pTextHeight = 0;
	
	for (t=1; t<=3; t++) {	
	    for (i=0; i<=19; i++) { 
	        pImageName = 'imgPLine' + t + i;
	        imageName = 'imgLine' + t + i;
	        
	        w = document.getElementById(imageName).width / 100;
	        h = document.getElementById(imageName).height / 100;
    	    
    	    if (h * previewscale > pTextHeight) { 
    	        pTextHeight = h * previewscale;
	        }
	        
	        document.getElementById(pImageName).height = h * previewscale;
	        document.getElementById(pImageName).width  = w * previewscale;	    	        	        
	    }
    }
    
    // scale the canvas 
    pcanvasHeight = (canvasHeight/100) * previewscale;
    pcanvasWidth = (canvasWidth/100) * previewscale;
    pmaxTextWidth = (maxTextWidth/100) * previewscale; 
    
    document.getElementById('PreviewLine1Div').style.width = pcanvasWidth;
    document.getElementById('PreviewLine2Div').style.width = pcanvasWidth;
    document.getElementById('PreviewLine3Div').style.width = pcanvasWidth;
    
    document.getElementById('PreviewLine1Div').style.left = previewLeft;
    document.getElementById('PreviewLine2Div').style.left = previewLeft;
    document.getElementById('PreviewLine3Div').style.left = previewLeft;
    
    
    refreshText();
    //document.getElementById('Image1').style.display = 'inline';
}

//------ 
function clearProductRollover() { 
	document.getElementById('shirt_rollover').src = 'designs/cache/canvas/rshirt_off.jpg';
	document.getElementById('hat_rollover').src = 'designs/cache/canvas/hat_off.gif';
	document.getElementById('jacket_rollover').src = 'designs/cache/canvas/jacket_off.gif';
	document.getElementById('bag_rollover').src = 'designs/cache/canvas/bag_off.gif';
}	

//*********************************************************************************************
//******************************************* Menu Functions **********************************
//*********************************************************************************************
function layout() {   
    if (document.getElementById('radLayout1').checked) {
            textlocation = '1';
        }
        else {
            textlocation = '2';
        }
        
   document.getElementById("txtFontLayout").value = textlocation;
   resize();    
}	

function setFontSize() { 

    var oldFontSize = fontsize;
    var status;
    var fail = false;
    
    if (document.getElementById('radFontSmall1').checked) { 
         if (willFitCanvas(fontstyle, '1')){
            fontsize = '1';            
         }                 
         else {
             fail = true;
         }
         
    }
    if (document.getElementById('radFontSmall2').checked) {
        
         if (willFitCanvas(fontstyle, '2')){
            fontsize = '2'; 
         }                 
         else {
             fail = true;
         }
    }

    if (document.getElementById('radFontSmall3').checked) {
    
         if (willFitCanvas(fontstyle, '3')){
            fontsize = '3'; 
         }                 
         else {
             fail = true;
         }
    }
    
    status = buildText('1',false);
    if (!status)fail = true;         
    if (!fail) status = buildText('2',false);    
    if (!status)fail = true;       
    if (!fail) status = buildText('3',false);    
    if (!status)fail = true;     
    
    if (fail) {
        fontsize = oldFontSize;
        resetStyle();        
    }
    else {
        textsize = fontHeight(fontsize, fontstyle);    
        document.getElementById("txtFontSize").value = fontsize;       
    }    
    refreshText();
}    

function setFontStyle() { 

    var oldFontStyle = fontstyle;
    var status;
    var fail = false;
    
    if (document.getElementById('radTypeBlock').checked) {
        if (willFitCanvas('1', fontsize)){
            fontstyle = '1';        
        }
        else {
            fail = true;
        }             
    }

    if (document.getElementById('radTypeFancy').checked) {
        if (willFitCanvas('2', fontsize)){
            fontstyle = '2';        
        }
        else {
            fail = true;
        }
    }

    if (document.getElementById('radTypeScript').checked) {
        if (willFitCanvas('3', fontsize)){
            fontstyle = '3';        
        }
        else {
            fail = true;
        }
    }
    
    status = buildText('1',false);
    if (!status)fail = true;         
    if (!fail) status = buildText('2',false);    
    if (!status)fail = true;       
    if (!fail) status = buildText('3',false);    
    if (!status)fail = true;     
    
    if (fail) {
        fontstyle = oldFontStyle;
        resetStyle();        
    }
    else {
        document.getElementById("txtFontStyle").value = fontstyle;
        textsize = fontHeight(fontsize, fontstyle);
    }    
    refreshText();   
}

function saveDesign() { 

    // no dialogs can be open before saving
    if (visibleDialog == 'colors') {
        alert('Please press OK to apply the color changes you have made.');
        return false;
     }
    
    // make sure the user entered initials
    if (document.getElementById("txtApproval").value.length > 1) {
            
        // save it
        var lb_hastext = false;
        var lb_nocolorselected = false;        
        var oktosave = true;        
        if (document.getElementById('Line1').value.length > 0) {lb_hastext=true};
        if (document.getElementById('Line2').value.length > 0) {lb_hastext=true};
        if (document.getElementById('Line3').value.length > 0) {lb_hastext=true};
        
        if (document.getElementById('Thread100').value == "#CF142B") {lb_nocolorselected = true};        
        
        if (!lb_hastext && textonly) {
                alert('You must enter some text to complete your design');
                oktosave = false;
            }
        
        if (lb_hastext && lb_nocolorselected) {             
                oktosave = confirm("The color of your text will be red.  If you want this color press OK, othewise press CANCEL and change your text color.");                            
        }
        
        if (!willFitHat(fontstyle, fontsize) && oktosave) {
            alert("This design is too tall to fit on a hat.  Please keep this in mind when placing your order.");
        }
                
        if (oktosave) {                                
            document.getElementById('SaveDesign').value = 'Y';
            document.Form1.submit();
        }

    }
    else { 
        document.getElementById('txtApproval').style.background = 'yellow';              
        window.scrollTo(0,50);
        document.getElementById('txtApproval').focus();
        alert('Please enter your initials to approve this design');
    }    
}

function setToolbarButton(buttonnumber) {
	
	switch (buttonnumber) {
		case 1:
		document.getElementById("Tab" + buttonnumber).src = 'designs/cache/canvas/new_on.gif';
		break;
		
		case 2:
		document.getElementById("Tab" + buttonnumber).src = 'designs/cache/canvas/colors_on.gif';
		break;
		
		case 3:
		if (!textonly) { 
		        document.getElementById("Tab" + buttonnumber).src = 'designs/cache/canvas/layout_on.gif';
		    }
		else {
            document.getElementById("Tab" + buttonnumber).src = 'designs/cache/canvas/layout_disabled.gif';		
		}
		    
		break;

		case 4:
		document.getElementById("Tab" + buttonnumber).src = 'designs/cache/canvas/edit_on.gif';
		break;

		case 5:
		document.getElementById("Tab" + buttonnumber).src = 'designs/cache/canvas/style_on.gif';
		break;

		case 7:
		if (visibleDialog == '') {
		        document.getElementById("Tab" + buttonnumber).src = 'designs/cache/canvas/save_on.gif';
		    }
		break;
		
		case 8:
		    document.getElementById("Tab" + buttonnumber).src = 'designs/cache/canvas/help_on.gif';	
		break;
	}
}

function resetToolbarButton(buttonnumber) {
	switch (buttonnumber) {
		case 1:
		document.getElementById("Tab" + buttonnumber).src = 'designs/cache/canvas/new_off.gif';
		break;
		
		case 2:
		document.getElementById("Tab" + buttonnumber).src = 'designs/cache/canvas/colors_off.gif';
		break;
		
		case 3:
		if (!textonly) { 
		        document.getElementById("Tab" + buttonnumber).src = 'designs/cache/canvas/layout_off.gif';
		    }
		else {
            document.getElementById("Tab" + buttonnumber).src = 'designs/cache/canvas/layout_disabled.gif';		
		}		
		break;

		case 4:
		document.getElementById("Tab" + buttonnumber).src = 'designs/cache/canvas/edit_off.gif';
		break;

		case 5:
		document.getElementById("Tab" + buttonnumber).src = 'designs/cache/canvas/style_off.gif';
		break;

		case 7:
		document.getElementById("Tab" + buttonnumber).src = 'designs/cache/canvas/save_off.gif';
		break;		
		
		case 8:
		document.getElementById("Tab" + buttonnumber).src = 'designs/cache/canvas/help_off.gif';
		break;	
	}
}

var visibleDialog = '';
function showDialog(name, top, left) {  

    if (name == 'fontlayout' && textonly) return false;    

    if (visibleDialog.length > 0) {
        hideDialog(visibleDialog);
        //return false;
    }   
    
    visibleDialog = name;  
    hidePreview();

    // show the new dialog 
    document.getElementById(name).style.top = top;
	document.getElementById(name).style.left = left;
	document.getElementById(name).style.visibility = 'visible';
}

function hideDialog(name) {

    document.getElementById(name).style.visibility = 'hidden';
	visibleDialog = '';
	
	switch (name) {
	    case 'logo':
	        showPreview();
	        break;
	    
   	    case 'colors':
   	        showPreview();
   	        if (document.getElementById('logoColorIsDirty').value == 'Y') { 
                document.getElementById("imgWaiting").style.display = "inline";
   	            document.getElementById('Image1').style.display = 'none';   	               	            
   	            return true;
   	        }
   	        else if(document.getElementById('textColorIsDirty').value == 'Y') {   	            
   	          	refreshText();   	          	
	            doRollover('hat_rollover', 'hat_on.gif');	               	            
	            return false;  	          
   	        }
   	        else { 
   	            return false;  	          
   	        }
	        break;

	    case 'fontlayout':
	        showPreview();
	        layout();
	        return false;
	        break;

	    case 'editText':	        
	        showPreview();
	        refreshText();
	        doRollover('hat_rollover', 'hat_on.gif');	        	       
	        return false;
	        break;
	
	    case 'fontSize':
	        showPreview();
	        setFontSize();
	        cacheFont();
	        doRollover('hat_rollover', 'hat_on.gif');
	        return false;
	        break;

	    case 'fontStyle':
	        showPreview();
            setFontStyle();
            cacheFont();
            doRollover('hat_rollover', 'hat_on.gif');
            return false;
	        break;	
	}
}

//*********************************************************************************************
//**************************************** Utility Functions **********************************
//*********************************************************************************************
function fontHeight(as_fontsize, as_fontstyle) {
    
    if (as_fontsize == '1') {                       
        switch (as_fontstyle) {
            case '1':
                return 35;               
                break;
            case '2':
                return 35;
                break;
            case '3':     
                return 56;
                break;                            
        }
    }
    if (as_fontsize == '2') {
        
        switch (as_fontstyle) {
            case '1':
                return 45;
                break;
            case '2':
                return 45;
                break;
            case '3':
                return 64;
                break;                            
        }               
    }

    if (as_fontsize == '3') {   
        switch (as_fontstyle) {
            case '1':
                return 60;
                break;
            case '2':
                return 60;
                break;
            case '3':
                return 80;
                break;                            
        } 
    }
}
function refreshText() {
    buildText('1', true);
    buildText('2', true);
    buildText('3', true);
}

function waitfor(Amount)
{
    var d;
    var mill;
    var diff;
    
    d = new Date() //today's date
    while (1) {
        mill=new Date() // Date Now
        diff = mill-d 
        if( diff > Amount ) {break;}
    }
}

// this is duped in a million places....saving bandwidth
function e(){
    showDialog('editText',108,420);
}

function imageTimer() {

    if (!textonly) {
        if (document.getElementById("Image1").complete) {             
            document.getElementById('preview').src = document.getElementById('Image1').src;
            document.getElementById("imgWaiting").style.display = "none";
            document.getElementById("Image1").style.display = "inline";
            var ImageHeight = document.getElementById("Image1").height;
            var ImageWidth = document.getElementById("Image1").width;    
            document.getElementById("Image1").style.left = canvasLeft + ((canvasWidth/2) - (ImageWidth/2));         
            resize();
            doRollover('hat_rollover', 'hat_on.gif');                  
            doRollover('hat_rollover', 'hat_on.gif');
            doRollover('hat_rollover', 'hat_on.gif');
            //document.title = 'COMPLETE';
        }
        else {      
            window.setTimeout("imageTimer()",100);
        } 
    }
    else {             
        document.getElementById("imgWaiting").style.display = "none";
        document.getElementById("Image1").style.display = "none";
        document.getElementById("Image1").src = '/designs/font/empty.gif';           
        doRollover('hat_rollover', 'hat_on.gif'); 
        doRollover('hat_rollover', 'hat_on.gif');
        //document.title = 'COMPLETE';                              
    }      
}

function cacheRolloverImages() {
    poloPreview= new Image();
    poloPreview.src = "../studio/designs/cache/canvas/rshirt_on.jpg";
    hatPreview= new Image();
    hatPreview.src = "../studio/designs/cache/canvas/hat_on.gif";
    jacketPreview= new Image();
    jacketPreview.src = "../studio/designs/cache/canvas/jacket_on.gif";
    bagPreview= new Image();
    bagPreview.src = "../studio/designs/cache/canvas/bag_on.gif";        
}

function cacheGarmentImages() {
    var fontbackcolor = document.getElementById('Thread99').value.substring(1,7);
    hatImage= new Image();
    jacketImage= new Image();
    bagImage= new Image();
    hatImage.src = '../studio/designs/cache/canvas/hat_' + fontbackcolor + '.gif';    
    jacketImage.src = '../studio/designs/cache/canvas/jacket_' + fontbackcolor + '.gif';    
    bagImage.src = '../studio/designs/cache/canvas/bag_' + fontbackcolor + '.gif';    
}

function cacheFont() {
    var fontbackcolor = document.getElementById('Thread99').value.substring(1,7);
    var fontcolor = document.getElementById('Thread100').value.substring(1,7);
    var i;
    var image;
          
    for (i=65; i<=90; i++) {
        var x = new Image();
        image = 'designs/font/' +  fontsize + '_' + fontstyle + '/' + i + '_' + fontcolor + '_' + fontbackcolor + '_' + fontsize + '_' + fontstyle + '.jpg'; 
        x.src = image;
    }
    
    for (i=97; i<=122; i++) {
        var x = new Image();
        image = 'designs/font/' +  fontsize + '_' + fontstyle + '/' + i + '_' + fontcolor + '_' + fontbackcolor + '_' + fontsize + '_' + fontstyle + '.jpg'; 
        x.src = image;
    }

    for (i=48; i<=57; i++) {
        var x = new Image();
        image = 'designs/font/' +  fontsize + '_' + fontstyle + '/' + i + '_' + fontcolor + '_' + fontbackcolor + '_' + fontsize + '_' + fontstyle + '.jpg'; 
        x.src = image;
    }

    image = 'designs/font/' +  fontsize + '_' + fontstyle + '/32_' + fontcolor + '_' + fontbackcolor + '_' + fontsize + '_' + fontstyle + '.jpg'; 
    
}

function hidePreview() {    
    document.getElementById('shirt_rollover').style.visibility = 'hidden';
    document.getElementById('hat_rollover').style.visibility = 'hidden';
    document.getElementById('jacket_rollover').style.visibility = 'hidden';
    document.getElementById('bag_rollover').style.visibility = 'hidden';
    document.getElementById('productImage').style.visibility = 'hidden';  
    document.getElementById('lblPreview').style.visibility = 'hidden';  
    document.getElementById('message').style.display = 'none'      
}

function showPreview() {
    document.getElementById('shirt_rollover').style.visibility = 'visible';
    document.getElementById('hat_rollover').style.visibility = 'visible';
    document.getElementById('jacket_rollover').style.visibility = 'visible';
    document.getElementById('bag_rollover').style.visibility = 'visible';
    document.getElementById('productImage').style.visibility = 'visible';  
    document.getElementById('lblPreview').style.visibility = 'visible';  
}


function setBrowserType() {
    var detect = navigator.userAgent.toLowerCase();  
    var OS,version,total,thestring;

    if (checkIt('konqueror'))
    {
	    browser = "IE";
	    OS = "Linux";
    }
    else if (checkIt(detect, 'safari')) {browser = "IE";}
    else if (checkIt(detect, 'omniweb')) {browser = "IE";}
    else if (checkIt(detect, 'opera')) {browser = "IE";}
    else if (checkIt(detect, 'webtv')) {browser = "IE";}
    else if (checkIt(detect, 'icab')) {browser = "IE";}
    else if (checkIt(detect, 'firefox')) {browser = "FF";}
    else if (checkIt(detect, 'msie')) {browser = "IE";}
    else if (!checkIt(detect, 'compatible'))
    {
	    browser = "NS"
	    version = detect.charAt(8);
    }
    else {browser = "IE";}
        
}

function checkIt(detect, string)
{
	var place = detect.indexOf(string) + 1;
	thestring = string;
	return place;
}

function filterString(inText) {   
    var invalidList = ";:\\{}[]@$%^*()_+=><//~`|";
    //var invalidList="'\";:\\{}[]!@#$%^&*()-_+=?><,.//?~`|";
    var outString = '';
    var inChar;
    var i;
    
    for(i=0; i <= inText.length-1; i++) {
        inChar = inText.charAt(i);
        
        if (invalidList.indexOf(inChar) == -1) {
            outString = outString + inChar;
        }
    }    
    return outString;
}

function willFitHat(as_fontstyle, as_fontsize) {
    var totalHeight = 0;    
    var totalHeight = totalHeight + document.getElementById("Image1").height;
    var numberLines = 0;
    var willFitHeight = false;
    var willFitWidth = true;
    
    // determine height
    if (document.getElementById('Line1').value.length > 0) numberLines++;  
    if (document.getElementById('Line2').value.length > 0) numberLines++;
    if (document.getElementById('Line3').value.length > 0) numberLines++;
    
    totalHeight = totalHeight + (fontHeight(as_fontsize, as_fontstyle) * numberLines);  
    if (totalHeight <= 230){
        willFitHeight = true;
    }
        
    if (willFitHeight) {
        return true;
        }
    else {
        return false;
        }
}

function willFitCanvas(as_fontstyle, as_fontsize) {
    var totalHeight = 0;    
    var totalHeight = totalHeight + document.getElementById("Image1").height;
    var numberLines = 0;
    var willFitHeight = false;
    var willFitWidth = true;
    
    // determine height
    if (document.getElementById('Line1').value.length > 0) numberLines++;  
    if (document.getElementById('Line2').value.length > 0) numberLines++;
    if (document.getElementById('Line3').value.length > 0) numberLines++;
    
    totalHeight = totalHeight + (fontHeight(as_fontsize, as_fontstyle) * numberLines);  
    if (totalHeight <= 300){
        willFitHeight = true;
    }
        
    if (willFitHeight) {
        return true;
        }
    else {
        return false;
        }
}

function resetStyle() {    
    if (fontstyle == '1') document.getElementById('radTypeBlock').checked = true;
    if (fontstyle == '2') document.getElementById('radTypeFancy').checked = true;
    if (fontstyle == '3') document.getElementById('radTypeScript').checked = true;
    if (fontsize == '1') document.getElementById('radFontSmall1').checked = true;
    if (fontsize == '2') document.getElementById('radFontSmall2').checked = true;
    if (fontsize == '3') document.getElementById('radFontSmall3').checked = true;
    alert('This style setting would place text outside the working area.  The style will be reset back to the previous setting.');
}

// this function is called from the search page to preload the images for the studio
function searchPageCache() { 
    var fontbackcolor = 'E7E7E7';   
    poloPreview = new Image();
    hatPreview = new Image();
    jacketPreview = new Image();
    bagPreview = new Image();
    hatImage = new Image();
    jacketImage = new Image();
    bagImage = new Image();
    emptyImage = new Image();
    
    poloPreview.src = "../studio/designs/cache/canvas/rshirt_on.jpg";
    hatPreview.src = "../studio/designs/cache/canvas/hat_on.gif";   
    jacketPreview.src = "../studio/designs/cache/canvas/jacket_on.gif";   
    bagPreview.src = "../studio/designs/cache/canvas/bag_on.gif"; 
    hatImage.src = '../studio/designs/cache/canvas/hat_' + fontbackcolor + '.gif';    
    jacketImage.src = '../studio/designs/cache/canvas/jacket_' + fontbackcolor + '.gif';    
    bagImage.src = '../studio/designs/cache/canvas/bag_' + fontbackcolor + '.gif'; 
    emptyImage.src = '/studio/designs/font/empty.gif';
}

function resize() {
    var intext;
    var line1HasText = false;
    var line2HasText = false;
    var line3HasText = false;
    var TextSpace = 0;
    var pTextSpace = 0;
    var ImageHeight = document.getElementById("Image1").height;
    var ImageWidth = document.getElementById("Image1").width;
    var pImageHeight = document.getElementById("preview").height;
    var pImageWidth = document.getElementById("preview").width;
    var Line1Top = 0;
    var Line2Top = 0;
    var Line3Top = 0;
    var pLine1Top = 0;
    var pLine2Top = 0;
    var pLine3Top = 0;        
    var ImageTop = 0;
    var ImageLeft = 0;
    var textLinesCount = 0;     
    var linecount = 0;
      
    document.getElementById("preview").style.left = previewLeft + ((pcanvasWidth/2) - (pImageWidth/2)); 
    
    intext = document.getElementById('Line1').value;    
    if (intext.length > 0) {
        line1HasText = true;
        TextSpace = TextSpace + textsize;
        pTextSpace = pTextSpace + pTextHeight;
        textLinesCount++;
    }

    intext = document.getElementById('Line2').value;    
    if (intext.length > 0) {
        line2HasText = true;
        TextSpace = TextSpace + textsize;
        pTextSpace = pTextSpace + pTextHeight;
        textLinesCount++;
    }

    intext = document.getElementById('Line3').value;    
    if (intext.length > 0) {
        line3HasText = true;
        TextSpace = TextSpace + textsize;
        pTextSpace = pTextSpace + pTextHeight;
        textLinesCount++;
    }
    
    if (textlocation == '1') { 
        if (line1HasText) {
            linecount++; 
            var Line1Top = (canvasTop + (canvasHeight/2) + ((linecount-1) * textsize) ) - ( (TextSpace/2) + (ImageHeight/2) );
            var pLine1Top = (previewTop + (pcanvasHeight/2) + ((linecount-1) * pTextHeight) ) - ( (pTextSpace/2) + (pImageHeight/2) ) + pTextTopOffset;
            }
            
        if (line2HasText) {       
            linecount++; 
            var Line2Top = (canvasTop + (canvasHeight/2) + ((linecount-1) * textsize) ) - ( (TextSpace/2) + (ImageHeight/2) );
            var pLine2Top = (previewTop + (pcanvasHeight/2) + ((linecount-1) * pTextHeight) ) - ( (pTextSpace/2) + (pImageHeight/2) ) + pTextTopOffset;
            }
            
        if (line3HasText) {            
            linecount++;
            var Line3Top = (canvasTop + (canvasHeight/2) + ((linecount-1) * textsize) ) - ( (TextSpace/2) + (ImageHeight/2) );
            var pLine3Top = (previewTop + (pcanvasHeight/2) + ((linecount-1) * pTextHeight) ) - ( (pTextSpace/2) + (pImageHeight/2) ) + pTextTopOffset;
            }
        if (linecount > 0) { 
            document.getElementById("Image1").style.top = (canvasTop + (canvasHeight/2) + ((linecount) * textsize) ) - ( (TextSpace/2) + (ImageHeight/2) );
            document.getElementById("preview").style.top = (previewTop + (pcanvasHeight/2) + ((linecount) * pTextHeight) ) - ( (pTextSpace/2) + (pImageHeight/2) );
        }
        else {
            document.getElementById("Image1").style.top = (canvasTop + (canvasHeight/2) + ((linecount) * textsize) ) - ( (TextSpace/2) + (ImageHeight/2) );
            document.getElementById("preview").style.top = (previewTop + (pcanvasHeight/2) + ((linecount) * pTextHeight) ) - ( (pTextSpace/2) + (pImageHeight/2) );
        }      
    }
    else {
        if (line1HasText) {
            var Line1Top = canvasTop + (canvasHeight/2) - ( (TextSpace/2) ) + (linecount * textsize) + (ImageHeight/2);
            var pLine1Top = (previewTop + (pcanvasHeight/2) - ( (pTextSpace/2) ) + (linecount * pTextHeight) + (pImageHeight/2)) + pTextTopOffset;
            }
            
        if (line2HasText) {       
            linecount++; 
            var Line2Top = canvasTop + (canvasHeight/2) - ( (TextSpace/2) ) + (linecount * textsize) + (ImageHeight/2);
            var pLine2Top = (previewTop + (pcanvasHeight/2) - ( (pTextSpace/2) ) + (linecount * pTextHeight) + (pImageHeight/2)) + pTextTopOffset;
            }
            
        if (line3HasText) {            
            linecount++;
            var Line3Top = canvasTop + (canvasHeight/2) - ( (TextSpace/2) ) + (linecount * textsize) + (ImageHeight/2);
            var pLine3Top = (previewTop + (pcanvasHeight/2) - ( (pTextSpace/2) ) + (linecount * pTextHeight) + (pImageHeight/2)) + pTextTopOffset;
            }
                    
        document.getElementById("Image1").style.top = canvasTop + (canvasHeight/2) - ( (ImageHeight/2) + (TextSpace/2) );
        document.getElementById("preview").style.top = previewTop + (pcanvasHeight/2) - ( (pImageHeight/2) + (pTextSpace/2) );
    }
    
    // position the design area
    document.getElementById("Line1Div").style.top = Line1Top;
    document.getElementById("Line2Div").style.top = Line2Top;
    document.getElementById("Line3Div").style.top = Line3Top;

    // position the preview area
    document.getElementById("PreviewLine1Div").style.top = pLine1Top;
    document.getElementById("PreviewLine2Div").style.top = pLine2Top;
    document.getElementById("PreviewLine3Div").style.top = pLine3Top;  
}