﻿   
  

function updatePrice()
{
        //y = 23.987x^-0.535
        var newsqft = (globalPropertiesArray[globalSelectedElement].measuredHeight/12 * globalPropertiesArray[globalSelectedElement].measuredWidth/12);
        var PricePerSqft = globalVinylM*Math.pow(newsqft,globalVinylB);
        //console.debug("==========");
        //console.debug("Square Foot:" + newsqft);
        //console.debug("Price per square foot:"+PricePerSqft);
        var basePrice = PricePerSqft*newsqft;
        var psqft=basePrice;
        //console.debug(basePrice);
        switch(globalPropertiesArray[globalSelectedElement].colorType)
        {
            case 'reflective':
                psqft += basePrice * globalReflectiveModifier;
                break;
            case 'specialty':
                psqft += basePrice * globalSpecialtyModifier;
                break;
            case 'fluorescent':
                psqft += basePrice * globalFluorescentModifier;
                break;
        }
        if(globalPropertiesArray[globalSelectedElement].outline)
        {
            switch(globalPropertiesArray[globalSelectedElement].outlineColorType)
            {
                case 'reflective':
                    psqft += basePrice * globalReflectiveModifier;
                    break;
                case 'standard':
                    psqft += basePrice * globalLetteringNextColor;
                    break;
                case 'specialty':
                    psqft += basePrice * globalSpecialtyModifier;
                    break;
                case 'fluorescent':
                    psqft += basePrice * globalFluorescentModifier;
                    break;
            }
        }
        if(globalPropertiesArray[globalSelectedElement].shadow)
        {
            switch(globalPropertiesArray[globalSelectedElement].shadowColorType)
            {
                case 'reflective':
                    psqft += basePrice * globalReflectiveModifier;
                    break;
                case 'standard':
                    psqft += basePrice * globalLetteringNextColor;
                    break;
                case 'specialty':
                    psqft += basePrice * globalSpecialtyModifier;
                    break;
                case 'fluorescent':
                    psqft += basePrice * globalFluorescentModifier;
                    break;
            }
        }
        if(globalPropertiesArray[globalSelectedElement].outlineTwo)
        {
            switch(globalPropertiesArray[globalSelectedElement].outlineTwoColorType)
            {
                case 'reflective':
                    psqft += basePrice * globalReflectiveModifier;
                    break;
                case 'standard':
                    psqft += basePrice * globalLetteringNextColor;
                    break;
                case 'specialty':
                    psqft += basePrice * globalSpecialtyModifier;
                    break;
                case 'fluorescent':
                    psqft += basePrice * globalFluorescentModifier;
                    break;
            }
        }
        
        globalPropertiesArray[globalSelectedElement].price = psqft;                
             
    
    globalPrice = globalPropertiesArray[globalSelectedElement].price;
    dojo.byId('priceBox').innerHTML = "$"+currencyFormatted(globalPrice);
}



function currencyFormatted(amount)
{
	var i = parseFloat(amount);
	if(isNaN(i)) { i = 0.00; }
	var minus = '';
	if(i < 0) { minus = '-'; }
	i = Math.abs(i);
	i = parseInt((i + .005) * 100);
	i = i / 100;
	s = new String(i);
	if(s.indexOf('.') < 0) { s += '.00'; }
	if(s.indexOf('.') == (s.length - 2)) { s += '0'; }
	s = minus + s;
	return s;
}

function isNumeric(input)
{
    var reg = new RegExp('^[-+]?[0-9]*\.?[0-9]+$');
    return reg.test(input);    
}

function updateNewWidth()
{
    if(!isNumeric(dojo.byId('changeHeight').value))
    {
        alert("The value entered for height is not a number");
        dojo.byId('changeHeight').value = 10;
        return;
    }
    
    
    currentRatio = globalPropertiesArray[globalSelectedElement].ratio;
    if(!globalPropertiesArray[globalSelectedElement].useCustomSize)
    {
        dojo.byId('changeWidth').value  = Math.round((dojo.byId('changeHeight').value * currentRatio)*100)/100; 
    }

    globalPropertiesArray[globalSelectedElement].measuredWidth = dojo.byId('changeWidth').value;
    globalPropertiesArray[globalSelectedElement].measuredHeight = dojo.byId('changeHeight').value;
    //yes this order does matter
    if(globalPropertiesArray[globalSelectedElement].useCustomSize)
    {
        setSize(globalSelectedElement);
    }
    
    updatePrice();
    updateSizeDisplay();
}

function updateNewHeight()
{
    if(!isNumeric(dojo.byId('changeWidth').value))
    {
        alert("The value entered for width is not a number");
        dojo.byId('changeWidth').value = 10;
        return;
    }
    currentRatio = globalPropertiesArray[globalSelectedElement].ratio;
    if(!globalPropertiesArray[globalSelectedElement].useCustomSize)
    {
        dojo.byId('changeHeight').value  = Math.round((dojo.byId('changeWidth').value / currentRatio)*100)/100;
    }
 
    globalPropertiesArray[globalSelectedElement].measuredWidth = dojo.byId('changeWidth').value;
    globalPropertiesArray[globalSelectedElement].measuredHeight = dojo.byId('changeHeight').value;
        //yes this order does matter
    if(globalPropertiesArray[globalSelectedElement].useCustomSize)
    {
        setSize(globalSelectedElement);
    }
    
    updatePrice();
    updateSizeDisplay();
}



function updateSizeDisplay(currentElement)
{
    var useElement;
    if(currentElement != undefined)
    {
        useElement = currentElement;
    }
    else
    {
        useElement = globalSelectedElement;
    }

    switch(globalPropertiesArray[useElement].type)
    {
        case 'text':    
                dojo.byId('changeWidth').value = globalPropertiesArray[useElement].measuredWidth;
                dojo.byId('changeHeight').value = globalPropertiesArray[useElement].measuredHeight;
                dojo.byId('sizeH').innerHTML = globalPropertiesArray[useElement].measuredWidth+"\"";
                dojo.byId('sizeV').innerHTML = globalPropertiesArray[useElement].measuredHeight+"\"";           
            break;
    }
    
}



function changeControlPanel(passedId)
{
            globalSelectedElement = passedId;
    
		    if(globalPropertiesArray[passedId] == undefined)
		    {

		    }
		    else
		    {   		    
		        switch(globalPropertiesArray[passedId].type)
		        {
		            case "text":
		                dojo.byId('textInput').value = globalPropertiesArray[passedId].text;
                        var objList = dojo.byId(fontListId);
                        for(i=0;i< objList.options.length;i++)
	                    {
		                    if(objList.options[i].value==globalPropertiesArray[passedId].font)
			                    objList.selectedIndex = i;
	                    }             	
                    	
	                    if(globalPropertiesArray[passedId].bold)	
	                        dijit.byId('bold').setAttribute('checked',true);
	                    else   
	                        dijit.byId('bold').setAttribute('checked',false);
                      
	                    if(globalPropertiesArray[passedId].italic)
	                        dijit.byId('italic').setAttribute('checked',true);
	                    else    
	                        dijit.byId('italic').setAttribute('checked',false);
                    	   
	                    if(globalPropertiesArray[passedId].shadow)	
	                        dijit.byId('shadow').setAttribute('checked',true);
	                    else   
	                        dijit.byId('shadow').setAttribute('checked',false);
                    	    
	                    if(globalPropertiesArray[passedId].outline)	
	                        dijit.byId('outline').setAttribute('checked',true);
	                    else   
	                        dijit.byId('outline').setAttribute('checked',false);
    	                 
    	                if(globalPropertiesArray[passedId].outlineTwo)	
	                        dijit.byId('outlinetwo').setAttribute('checked',true);
	                    else   
	                        dijit.byId('outlinetwo').setAttribute('checked',false); 
                        
                        if(globalPropertiesArray[passedId].gradient)	
	                        dijit.byId('gradient').setAttribute('checked',true);
	                    else   
	                        dijit.byId('gradient').setAttribute('checked',false); 
	                        
	                    if(!globalPropertiesArray[passedId].useCustomSize)	
	                        dijit.byId('proportionCheck').setAttribute('checked',true);
	                    else   
	                        dijit.byId('proportionCheck').setAttribute('checked',false); 
                        
                        updateSizeDisplay();
		                break;      	            	
	           }
	       }        
    
}

function getMaxHeight()
{
    var boxSize = dojo.coords(dojo.byId(globalSelectedElement),true);
    var parentSize = dojo.coords(dojo.byId(globalContainerElement));
    return Math.round(parentSize.h-boxSize.t);
}

function getMaxWidth()
{
    var boxSize = dojo.coords(dojo.byId(globalSelectedElement),true);
    var parentSize = dojo.coords(dojo.byId(globalContainerElement));
    return Math.round(parentSize.w-boxSize.l);
}

function generatePreview(parameters)
{

    globalTypeList.removeAt(0);
    globalTypeList.forEach(function(n){
			clearTimeout(n);
		 });
    globalTypeList.clear();


    
    //magic number of the day 2 <---!
    //dotted line addes 1pixel padding to image
    //so we must offset for this or image will grow in size
    var coords = dojo.coords(globalSelectedElement);
    currentWidth = coords.w;
    currentHeight = coords.h;

    var scale = 1;
    
    var urlString = "GenerateImage.ashx?type="+globalPropertiesArray[globalSelectedElement].type;
    
	urlString += "&mh=10000&mw=800";
   
    //a hack here for the lettering designer, we always want to at least resetbounds
    if(parameters != 'resetboundswithtext')
    {
        parameters = 'resetboundswithtext';
    }
   
    switch(parameters)
    {
        case 'resetbounds':
            urlString += "&rb=true";
            globalPropertiesArray[globalSelectedElement].scale = 1;
            globalScaleDirection = 'corner';            
            globalResetRatio = true;
            break;
            
        case 'resetboundswithtext':
            urlString += "&rb=true&rbwt=true&pr="+globalPropertiesArray[globalSelectedElement].ratio;
            
            globalPropertiesArray[globalSelectedElement].scale = 1;
            globalScaleDirection = 'corner';            
            globalResetRatio = true; 
            if(globalEmptyFlag)
            {
                currentHeight = 30;
                currentWidth = 30;
                globalEmptyFlag = false;
            }        
            break;     
    }
    /*
    switch(globalScaleDirection)
    {
        case 'corner':
            scale = 1;
            if(globalPropertiesArray[globalSelectedElement].scale != 1)
                scale = globalPropertiesArray[globalSelectedElement].scale;
            break;
        case 'side':
            scale = (currentWidth/currentHeight)-(globalPropertiesArray[globalSelectedElement].ratio);
            globalPropertiesArray[globalSelectedElement].scale = scale;
            break;
        default:
            scale = 1;
            if(globalPropertiesArray[globalSelectedElement].scale != 1)
                scale = globalPropertiesArray[globalSelectedElement].scale;
            break;
    } 
    */   
    urlString += "&scale="+encodeURIComponent(scale);
	urlString += "&ch="+currentHeight+"&cw="+currentWidth;	

	switch(globalPropertiesArray[globalSelectedElement].type)
	{
	    case "text":
	    	urlString += "&f="+encodeURIComponent(globalPropertiesArray[globalSelectedElement].font);
	    	urlString += "&color=" + encodeURIComponent(globalPropertiesArray[globalSelectedElement].colorValue);
	        urlString += "&text=" + encodeURIComponent(globalPropertiesArray[globalSelectedElement].text);
	        urlString += "&bold="+globalPropertiesArray[globalSelectedElement].bold+"&italic="+globalPropertiesArray[globalSelectedElement].italic;
            urlString += "&shadow="+globalPropertiesArray[globalSelectedElement].shadow+"&shadowc="+globalPropertiesArray[globalSelectedElement].shadowColorValue;         
            urlString += "&outline="+globalPropertiesArray[globalSelectedElement].outline+"&outlinec="+globalPropertiesArray[globalSelectedElement].outlineColorValue; 
            urlString += "&outlinetwo="+globalPropertiesArray[globalSelectedElement].outlineTwo+"&outlinetwoc="+globalPropertiesArray[globalSelectedElement].outlineTwoColorValue;
            urlString += "&ta="+globalPropertiesArray[globalSelectedElement].textAlign;
            urlString += "&grd="+globalPropertiesArray[globalSelectedElement].gradient+"&grdtc="+globalPropertiesArray[globalSelectedElement].gradientTopColorValue+"&grdbc="+globalPropertiesArray[globalSelectedElement].gradientBottomColorValue;
	        urlString += "&ld=true";
	        break;
	}
    dojo.byId('loading').style.display = "block";
    
    urlString = baseUrl+"/"+urlString;
	
	
	//timing issue, need to lock the current element for only this instance of loading the image
	var currentElement = globalSelectedElement;
    image_1 = new Image();
    dojo.connect(image_1, "onload", function(mover){
        globalPropertiesArray[currentElement].height = mover.currentTarget.height;
        globalPropertiesArray[currentElement].width = mover.currentTarget.width; 

        globalResetRatio = true;
        if(globalResetRatio)
        {
            globalPropertiesArray[currentElement].ratio = mover.currentTarget.width / mover.currentTarget.height;
            globalResetRatio = false;
        }
        
        setSize(currentElement);       
        updateNewWidth();
        
        updateRulers();
        dojo.byId(currentElement).setAttribute('src',urlString);
        dojo.byId('loading').style.display = "none";
        dojo.disconnect(this);     
    }); 
    image_1.src = urlString;
  
}




function saveDesign()
{
     dojo.byId('loading').style.display = "block";
    
    var dataArray = new Object();
    function signSettings()
    {      
        this.signTemplateId = globalSignTemplateId;                    
    } 
    
    dataArray["signSettings"] =  new signSettings();   

    dataArray[globalSelectedElement] = globalPropertiesArray[globalSelectedElement].clone(); //hopefully this works well ?
	   
    dojo.rawXhrPost( {
            url: "SaveLettering.ashx",
            handleAs: "json-comment-filtered",
            postData: encodeBase64(dojo.toJson(dataArray)),
            timeout: 10000,
            load: function(response, ioArgs) {
                    if(response.response == "ok")
                    {
                        window.location = "reviewcart.aspx";
                        dojo.byId('loading').style.display = "none";
                    }                    
                    return response;
            },
            error: function(response, ioArgs) {
                     dojo.byId('loading').style.display = "none";
                    alert("Error has occured HTTP status code: " + ioArgs.xhr.status);
                    return response;
            }
    });   
}


function updateFont()
{
    globalPropertiesArray[globalSelectedElement].font = dojo.byId(fontListId).value;
    generatePreview('resetbounds');
}

function countLines(newText)
{
   returnValue = 1;
   var temp = new Array();
   temp = newText.split('\n');
   returnValue = temp.length;
   if(returnValue ==0)
    returValue = 1;
   return returnValue;
}
   function showMenu(link)
    {
        switch(link)
        {
            case 'addlettering':
                dijit.popup.open({popup: dijit.byId('newTextDialog'), x: dojo.coords('letteringLink',true).x + 20, y: dojo.coords('letteringLink',true).y + 10});
                break;
            case 'changesidecolor':
                dijit.popup.open({popup: dijit.byId('sideColorDialog'), x: dojo.coords('sideColorLink',true).x + 20, y: dojo.coords('sideColorLink',true).y + 10});
                break;
            case 'textColor':
                globalChangeColor = 'text';
                dijit.popup.open({popup: dijit.byId('colorDialog'), x: dojo.coords('textColorLink',true).x + 20, y: dojo.coords('textColorLink',true).y + 10});
                break;
            case 'textOutlineColor':
                globalChangeColor = 'outline';
                dijit.popup.open({popup: dijit.byId('colorDialog'), x: dojo.coords('outline',true).x + 20, y: dojo.coords('outline',true).y + 10});
                break;    
            case 'textOutlineTwoColor':
                globalChangeColor = 'outlinetwo';
                dijit.popup.open({popup: dijit.byId('colorDialog'), x: dojo.coords('outlinetwo',true).x + 20, y: dojo.coords('outlinetwo',true).y + 10});
                break; 
            case 'textShadowColor':
                globalChangeColor = 'shadow';
                dijit.popup.open({popup: dijit.byId('colorDialog'), x: dojo.coords('shadow',true).x + 20, y: dojo.coords('shadow',true).y + 10});
                break;                  
            case 'clipartColor':
                globalChangeColor = 'clipart';
                dijit.popup.open({popup: dijit.byId('colorDialog'), x: dojo.coords('clipartColor',true).x + 20, y: dojo.coords('clipartColor',true).y + 10});
                
                break;
            case 'uploadDialog':
                dijit.popup.open({popup: dijit.byId('uploadDialog'), x: dojo.coords('uploadLink',true).x + 20, y: dojo.coords('uploadLink',true).y + 10});          
                break;  
                
            case 'gradientColor':
                dijit.popup.open({popup: dijit.byId('gradientDialog'), x: dojo.coords('gradient',true).x + 20, y: dojo.coords('gradient',true).y + 10});
                break; 
 
                
            
        }
               
        //dijit.popup.close(dijit.byId("colorDialog"));
    }


function updateText()
{
    if(globalPropertiesArray[globalSelectedElement].text == "")
        globalEmptyFlag = true;
    

    globalPropertiesArray[globalSelectedElement].text = dojo.byId('textInput').value;
    globalTypeList.add(setTimeout("generatePreview('resetboundswithtext')",1000));

}   

function updateBackgroundColor(colorId,colorValue)
{
    globalBackgroundColor = colorValue;
    dojo.query("#contentholder").style("background","#"+globalBackgroundColor);
}

function updateColor(colorId,colorValue,colorType)
{
    switch(globalChangeColor)
    {
        case 'text':
            globalPropertiesArray[globalSelectedElement].gradient = false;
            dijit.byId('gradient').setAttribute('checked',false);
            globalPropertiesArray[globalSelectedElement].colorId = colorId;    
            globalPropertiesArray[globalSelectedElement].colorValue = colorValue;   
            globalPropertiesArray[globalSelectedElement].colorType = colorType;
            generatePreview();  
            break;
        case 'outline':
            updateOutlineColor(colorId,colorValue,colorType);
            break;
        case 'outlinetwo':
            updateOutlineTwoColor(colorId,colorValue,colorType);
            break;
        case 'shadow':
            updateShadowColor(colorId,colorValue,colorType);
            break;
        case 'clipart':
            globalPropertiesArray[globalSelectedElement].colorId = colorId;    
            globalPropertiesArray[globalSelectedElement].colorValue = colorValue;   
            globalPropertiesArray[globalSelectedElement].colorType = colorType;  
            generatePreview();  
            break;
        
    }
 
}

function updateBottomGradientColor(colorId,colorValue,colorType)
{
    globalPropertiesArray[globalSelectedElement].gradientBottomColorId = colorId;    
    globalPropertiesArray[globalSelectedElement].gradientBottomColorValue = colorValue;     
    generatePreview();   
}

function updateTopGradientColor(colorId,colorValue,colorType)
{
    globalPropertiesArray[globalSelectedElement].gradientTopColorId = colorId;    
    globalPropertiesArray[globalSelectedElement].gradientTopColorValue = colorValue; 
    generatePreview();   
}

function updateOutlineTwoColor(colorId,colorValue,colorType)
{
    globalPropertiesArray[globalSelectedElement].outlineTwoColorId = colorId;    
    globalPropertiesArray[globalSelectedElement].outlineTwoColorValue = colorValue;     
    globalPropertiesArray[globalSelectedElement].outlineTwoColorType = colorType;
    generatePreview();   
}

function updateOutlineColor(colorId,colorValue,colorType)
{
    globalPropertiesArray[globalSelectedElement].outlineColorId = colorId;    
    globalPropertiesArray[globalSelectedElement].outlineColorValue = colorValue;     
    globalPropertiesArray[globalSelectedElement].outlineColorType = colorType;
    generatePreview();   
}

function updateShadowColor(colorId,colorValue,colorType)
{
    globalPropertiesArray[globalSelectedElement].shadowColorId = colorId;    
    globalPropertiesArray[globalSelectedElement].shadowColorValue = colorValue;    
    globalPropertiesArray[globalSelectedElement].shadowColorType = colorType; 
    generatePreview();   
}

function updateRulers()
{
        var coords = dojo.coords(globalSelectedElement);
        dojo.byId('rulerV').style.height = coords.h+"px";
        dojo.byId('rulerH').style.width = coords.w+"px";        
        dojo.byId('rulerV').style.left = coords.l+coords.w+"px";
        dojo.byId('rulerV').style.top = coords.t+"px";
        dojo.byId('rulerH').style.top = coords.t+coords.h+"px";
        dojo.byId('rulerH').style.left = coords.l+"px";
        dojo.byId('sizeH').style.left = coords.l+"px";
        dojo.byId('sizeH').style.top = coords.t+coords.h+30+"px";
        dojo.byId('sizeV').style.top = coords.t+"px";
        dojo.byId('sizeV').style.left = coords.l+coords.w+30+"px";
        dojo.byId('sizeH').innerHTML = globalPropertiesArray[globalSelectedElement].measuredWidth+"\"";
        dojo.byId('sizeV').innerHTML = globalPropertiesArray[globalSelectedElement].measuredHeight+"\"";
}

function setSize(passedId)
{
    if(globalPropertiesArray[passedId].useCustomSize)
    {
        
        var newRatio = globalPropertiesArray[passedId].measuredWidth / globalPropertiesArray[passedId].measuredHeight;
        dojo.style(passedId,"width",globalPropertiesArray[passedId].width+"px");
        var newHeight = Math.round(globalPropertiesArray[passedId].width/newRatio);
        dojo.style(passedId,"height",newHeight+"px");
        updateRulers();
    }
    else
    {
        dojo.style(passedId,"height",globalPropertiesArray[passedId].height+"px");
        dojo.style(passedId,"width",globalPropertiesArray[passedId].width+"px");
    }
}

function updateTextAlign(parameter)
{   
    globalPropertiesArray[globalSelectedElement].textAlign = parameter;
    
    generatePreview();
}

function updateChecked(parameter)
{   
    switch(parameter)
    {
        case 'bold':
            globalPropertiesArray[globalSelectedElement].bold = dojo.byId(parameter).checked;
            generatePreview('resetbounds');
            break;
        case 'italic':
            globalPropertiesArray[globalSelectedElement].italic = dojo.byId(parameter).checked;
            generatePreview('resetbounds');
            break;
        case 'outline':
            globalPropertiesArray[globalSelectedElement].outline = dojo.byId(parameter).checked;
            if(globalPropertiesArray[globalSelectedElement].outlineTwo)
            {
                globalPropertiesArray[globalSelectedElement].outline = true;
                dijit.byId('outline').setAttribute('checked',true);
            }
            generatePreview('resetbounds');
            break;
        case 'outlinetwo':
          
            globalPropertiesArray[globalSelectedElement].outlineTwo = dojo.byId(parameter).checked;
            if(globalPropertiesArray[globalSelectedElement].outlineTwo)
            {
                globalPropertiesArray[globalSelectedElement].outline = true;
                dijit.byId('outline').setAttribute('checked',true);
            }
            generatePreview('resetbounds');
            break;            
        case 'shadow':
            globalPropertiesArray[globalSelectedElement].shadow = dojo.byId(parameter).checked;
            generatePreview('resetbounds');
            break; 
        case 'flipvertical':
            globalPropertiesArray[globalSelectedElement].flipVertical = dojo.byId(parameter).checked;
            generatePreview();
            break;
        case 'fliphorizontal':
            globalPropertiesArray[globalSelectedElement].flipHorizontal = dojo.byId(parameter).checked;
            generatePreview();
            break;    
        case 'gradient':
            globalPropertiesArray[globalSelectedElement].gradient = dojo.byId(parameter).checked;
            generatePreview();
            break;     
        case 'proportionCheck':
            globalPropertiesArray[globalSelectedElement].useCustomSize = dojo.byId(parameter).checked ? false : true;
            generatePreview();
            break;         
    }
    
    
}

function moveElement(direction)
{
    dojo.query(".dojoxResizeHandle*").style("display","none"); //clear handles   
    var boxSize = dojo.coords(globalSelectedElement,true);
    switch(direction)
    {
        case 'left':
            dojo.style(globalSelectedElement,'left',boxSize.l-1+"px");
            break;
        case 'up':
            dojo.style(globalSelectedElement,'top',boxSize.t-1+"px");
            break;
        case 'down':
            dojo.style(globalSelectedElement,'top',boxSize.t+1+"px");
            break;
        case 'right':
            dojo.style(globalSelectedElement,'left',boxSize.l+1+"px");
            break;        
    }
    setClip();
}

function swapArrow(direction)
{
    switch(direction)
    {
        case 'left':
            dojo.byId('arrow').setAttribute('src','images/arrowsleft.jpg');
            break;
        case 'top':
            dojo.byId('arrow').setAttribute('src','images/arrowsup.jpg');
            break;
        case 'bottom':
            dojo.byId('arrow').setAttribute('src','images/arrowsdown.jpg');
            break;
        case 'right':
            dojo.byId('arrow').setAttribute('src','images/arrowsright.jpg');
            break;
        case 'off':
            dojo.byId('arrow').setAttribute('src','images/arrows.jpg');
            break;
        
    }
}
