// JavaScript Document

var xmlHttp;

$(document).ready(function()
{
	var $tabs = $('#container-1 > ul').tabs();
    
    $('#shapecats ul li').each(function() {
		$(this).unbind("mouseover", function() {
			return;
        });
    });
    
    $('#double_mat').click(function() 
    {
        if($('#double_mat').attr('checked'))
        {
			$('#divContainer_3578').show();       
            $('#title2ndmat').show();
            
            color = $('#mat_color2').val();
            name = $('#mat_color_name2').val();

			chgBackground2(color, name);
            
        }
        else
        {
            $('#title2ndmat').hide();
            
            $('#mat_color2').val('');
            $('#mat_color_name2').val('');

			undochgBackground2();
        }
    	getprice();
    });
    
	$('#print').click(function () {
    
	$('#moreinfo').toggle();
    
		$('.upload').each(function (){
        
        	$(this).toggle();
        
        });
        $('.imgalpha').each(function () {
       		if($('#print').attr('checked')) $(this).val('1');
            else $(this).val('0');
        })
    
    });

  var x, y;

  x = xPageX('drop1');
  y = xPageY('drop1');
  
  xEnableDrop('drop1', findXY);
	
  YUI();   
  
  $('#nw').val('100.00');
  $('#nh').val('100.00');
  
  chgBackground('#709B89', 'M40-Slate');
  show_grid('');
});

function YUI() 
{
    var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event;
	var resize = new YAHOO.util.Resize('drop1', {
		handles: 'r, b, br',
		knobHandles: true,
		height: '499px',
		width: '500px',
		maxHeight: 499,
		maxWidth: 500,
        xTicks: 5,
        yTicks: 5,
		proxy: true,
		ghost: true,
		draggable: false,
		animate: true,
        autoRatio: true,
		animateDuration: .75,
		animateEasing: YAHOO.util.Easing.backBoth
	});

    resize.on('endResize', function(ev) {
		var w = ev.width; 
		var h = ev.height;
        var units = document.getElementById('munit');
    	var munits = units.options[units.selectedIndex].value;
        
        if(munits == 'cm')
        {
			$('#nw').val((w * 0.2).toFixed(2)); 
			$('#nh').val((h * 0.2).toFixed(2));
        }
        else
        {
        	$('#nw').val((w * 0.078).toFixed(0)); 
			$('#nh').val((h * 0.078).toFixed(0));
        }
        
        setTimeout(function() { getprice(); }, 1000);
    });
};

function erase(dt) {

	var bayyak = dt.id;
	var obj = xGetElementById('drop1');

	if(xLeft(dt) > (xWidth(obj) - xWidth(dt)) || xTop(dt) > (xHeight(obj) - xHeight(dt)) || (xLeft(dt) < 0) || (xTop(dt) < 0) )
	{
		//alert('Out of bound!');
		xGetElementById(bayyak + "_x").value = "";
		xGetElementById(bayyak + "_y").value = "";
	}

    getprice();
}

function findXY(dt, obj, m, n) {

	var obj2 = xGetElementById('drop1');
	var bayyak = obj.id;
	var x = 0;
	var x2 = 0;
	var y = 0;
	var y2 = 0;
    
	while (obj) 
	{
		x += obj.offsetLeft;
		y += obj.offsetTop;
		obj = obj.offsetParent;
	}

	while (obj2) 
	{
		x2 += obj2.offsetLeft;
		y2 += obj2.offsetTop;
		obj2 = obj2.offsetParent;
	}

	xGetElementById(bayyak + "_x").value = Math.abs(x-x2);
	xGetElementById(bayyak + "_y").value = Math.abs(y-y2);
}

function change() {

	var obj = xGetElementById('drop1');
    var units = xGetElementById('munit');
    var munits = units.options[units.selectedIndex].value;
	var w = xGetElementById('nw').value;
	var h = xGetElementById('nh').value;

    if(munits == 'cm')
    {
        if(w > 101.6 || h > 101.6)
        {
            alert("mat-board can't exceed 101.6 cm");  
        }
        else
        {
            obj.style.width = (w / 0.2).toFixed(0) + "px";
            obj.style.height = (h / 0.2).toFixed(0)  + "px";
        }
	}
    else
    {
    	if(w > 40 || h > 40)
        {
            alert("mat-board can't exceed 40 inches");  
        }
        else
        {
            obj.style.width = (w / 0.078).toFixed(0) + "px";
            obj.style.height = (h / 0.078).toFixed(0)  + "px";
        }
    }	
    
    getprice();
}

function chgBackground(color, name) 
{
	document.getElementById("drop1").style.backgroundColor = color;
    document.getElementById("mat_color_name").value = name;
	document.getElementById("color").value = color;
}

function chgBackground2(color, name) {

	$('#double_mat').attr('checked', true);

	if(color == '') color = '000000';
    else color = color.replace("#", "");
    
	$('#mat_color2').val(color);
    $('#mat_color_name2').val(name);
	
    thisOne = xGetElementById("form_elements"); 
	counter = thisOne.getElementsByTagName("input");
	count = counter.length;

    if(count/4 >= 1)
    {
        for(j=0; j<count/4; j++)
        {
            nodez = "#node"+j; 
            
            current_bg = $(nodez).css("background-image");
            old_width = $(nodez).css("width");
            old_height = $(nodez).css("height");
            
            f_name = current_bg.substr((current_bg.lastIndexOf("/")+1));
            f_name = f_name.replace(/[\(\),]/g, '');
            
            new_bg = '/images/custom_collages/'+color+'/'+f_name;
            
            new_bg = Trim(new_bg);

            orig_div = xGetElementById("node"+j+"_type").value;
            shape_width = $("#shape"+orig_div).width();
            shape_height = $("#shape"+orig_div).height();
            
            c_width = shape_width + 12;
            c_height = shape_height + 13;
                                    
            $(nodez).css("background-image", 'url(' + new_bg +')');
            $(nodez).css("width", c_width);
            $(nodez).css("height", c_height);
      }
    }
    getprice();
}

function undochgBackground2()
{
    thisOne = xGetElementById("form_elements"); 
	counter = thisOne.getElementsByTagName("input");
	count = counter.length;

    if(count/4 >= 1)
    {
        for(j=0; j<count/4; j++)
        {
            nodez = "#node"+j; 
            
            current_bg = $(nodez).css("background-image");
            
            f_name = current_bg.substr((current_bg.lastIndexOf("/")+1));
            f_name = f_name.replace(/[\(\),]/g, '');
            
            new_bg = '/images/custom_collages/'+f_name;
            
            new_bg = Trim(new_bg);
			
            orig_div = xGetElementById("node"+j+"_type").value;
            shape_width = $("#shape"+orig_div).width();
            shape_height = $("#shape"+orig_div).height();
            
            c_width = shape_width; //+ 15;
            c_height = shape_height; //+ 15;
                                    
            $(nodez).css("background-image", 'url(' + new_bg +')');
            $(nodez).css("width", c_width);
            $(nodez).css("height", c_height);  
      }
    }
	getprice();
}

function toggleColorPicker()
{
      var objDiv = document.getElementById("wallColorFullSelectionDiv");
      if(objDiv.style.display == "none") objDiv.style.display = "";
      else objDiv.style.display = "none";
}

function removeElement(id) {

  var d = document.getElementById('drop1');
  var m = document.getElementById('form_elements');
  var olddiv = document.getElementById(id);
  x = document.getElementById(id + '_x');
  y = document.getElementById(id + '_y');
  type = document.getElementById(id + '_type');

  olddiv.style.display = 'none';

  x.value = 0;
  y.value = 0;

  type.value = '';
  
  getprice();
  
}

function moveall(dir)
{
	thisOne = xGetElementById("form_elements"); 
	counter = thisOne.getElementsByTagName("input");
	count = counter.length;
	alertText = '';
	for(i=0; i<count; i++)
	{
		alertText += "Name: " +counter[i].name+ " Value: " + counter[i].value + "\n"
	}

    if(count/3 >= 1)
    {
    	var x = 0;
        var y = 0;
        
    	if(dir == "up")			y = 10;
        else if(dir == "down")  y = -10;
        else if(dir == "left") 	x = 10;
        else if(dir == "right")	x = -10;

        for(j=0; j<count/3; j++)
        {
            el = xGetElementById('node'+j);

            if(el.offsetLeft >= (x*2) && el.offsetTop >= (y*2))
            {
                xMoveTo(el, el.offsetLeft - x, el.offsetTop - y);
                node_x = "node"+j+"_x";
                node_y = "node"+j+"_y";
                xGetElementById(node_x).value = el.offsetLeft;
                xGetElementById(node_y).value = el.offsetTop;
            }
      }
    }
}

function createNode(ismo, type)
{
		//Count number of layers being used

        thisOne = document.getElementById("drop1"); 
        counter = thisOne.getElementsByTagName("div");
        count = counter.length;
        count = count - 6;
        
        var node_original = document.getElementById(ismo);
        var node2 = node_original.cloneNode(true);

        new_node = 'node' + count;
        node2.setAttribute('id', new_node);
        node2.setAttribute('name', new_node);   

        //Throw duplicate into container

        var container = document.getElementById('drop1'); 

        container.appendChild(node2);      

        //Enable Drag for duplicate

        xEnableDrag2(new_node, null, null, erase, 'drop1');

        //Set style settings for Duplicate layer

        var duplicate_name = document.getElementById(new_node); 
                
        link = '<a style="cursor: pointer; float: none;" onclick="javascript: removeElement(\''+new_node+'\');"><img src="/images/delete-icon.png" alt="Delete Shape" title="Delete Shape" border="0" /></a><a id="uploaded_node'+count+'" style="position: relative; display: none; bottom: 0; float:left;" href="/images/custom_collages/tmp/e83b87621057ff6c884c69d17ba5d2e8/node'+count+'.jpg?time=06091031" title="Uploaded Image" class="view"><img src="/images/view-image.png" alt="View Uploaded Image" title="View Uploaded Image" border="0" /></a><a id="upload'+count+'" style="position: relative; display: none; bottom: 0; float:right;" href="/scripts/upload_collage.php?node='+new_node+'&width=550&height=550&TB_iframe=true" title="Upload Image" class="thickbox upload"><img src="/images/upload-image.png" alt="Upload Image" title="Upload Image" border="0" /></a>';
        
        duplicate_name.innerHTML = link;
        tb_init('#upload'+count);//pass where to apply thickbox
        tb_init('#uploaded_node'+count);//pass where to apply thickbox
               
        if($('#print').attr('checked')) 
        {
        	$('#upload'+count).show();
            //$('#uploaded_node'+count).show();
        }
        else
        {
        	$('#upload'+count).hide();
            //$('#uploaded_node'+count).hide();
        }
        
        var duplicate = duplicate_name.style;

        duplicate.position = 'absolute';

        //duplicate.padding = '4px';

        //duplicate.border = '2px solid #000000';

        duplicate.visibility = 'visible';

        duplicate.cursor = 'move';

        switch(ismo)

         {
	 case 'shape1': 
	 width = '49px'; 
	 height = '73px'; 
	 image = '/images/custom_collages/collage_1.png'; 
	 break; 

	 case 'shape2': 
	 width = '73px'; 
	 height = '49px'; 
	 image = '/images/custom_collages/collage_2.png'; 
	 break; 

	 case 'shape3': 
	 width = '87px'; 
	 height = '61px'; 
	 image = '/images/custom_collages/collage_3.png'; 
	 break; 

	 case 'shape4': 
	 width = '99px'; 
	 height = '73px'; 
	 image = '/images/custom_collages/collage_4.png'; 
	 break; 

	 case 'shape5': 
	 width = '124px'; 
	 height = '99px'; 
	 image = '/images/custom_collages/collage_5.png'; 
	 break; 

	 case 'shape6': 
	 width = '173px'; 
	 height = '137px'; 
	 image = '/images/custom_collages/collage_6.png'; 
	 break; 

	 case 'shape7': 
	 width = '250px'; 
	 height = '199px'; 
	 image = '/images/custom_collages/collage_7.png'; 
	 break; 

	 case 'shape8': 
	 width = '61px'; 
	 height = '87px'; 
	 image = '/images/custom_collages/collage_8.png'; 
	 break; 

	 case 'shape9': 
	 width = '73px'; 
	 height = '99px'; 
	 image = '/images/custom_collages/collage_9.png'; 
	 break; 

	 case 'shape13': 
	 width = '99px'; 
	 height = '123px'; 
	 image = '/images/custom_collages/collage_13.png'; 
	 break; 

	 case 'shape14': 
	 width = '73px'; 
	 height = '111px'; 
	 image = '/images/custom_collages/collage_14.png'; 
	 break; 

	 case 'shape15': 
	 width = '111px'; 
	 height = '73px'; 
	 image = '/images/custom_collages/collage_15.png'; 
	 break; 

	 case 'shape16': 
	 width = '123px'; 
	 height = '161px'; 
	 image = '/images/custom_collages/collage_16.png'; 
	 break; 

	 case 'shape17': 
	 width = '161px'; 
	 height = '123px'; 
	 image = '/images/custom_collages/collage_17.png'; 
	 break; 

	 case 'shape18': 
	 width = '137px'; 
	 height = '187px'; 
	 image = '/images/custom_collages/collage_18.png'; 
	 break; 

	 case 'shape19': 
	 width = '187px'; 
	 height = '137px'; 
	 image = '/images/custom_collages/collage_19.png'; 
	 break; 

	 case 'shape20': 
	 width = '137px'; 
	 height = '173px'; 
	 image = '/images/custom_collages/collage_20.png'; 
	 break; 

	 case 'shape21': 
	 width = '149px'; 
	 height = '199px'; 
	 image = '/images/custom_collages/collage_21.png'; 
	 break; 

	 case 'shape22': 
	 width = '199px'; 
	 height = '149px'; 
	 image = '/images/custom_collages/collage_22.png'; 
	 break; 

	 case 'shape23': 
	 width = '199px'; 
	 height = '249px'; 
	 image = '/images/custom_collages/collage_23.png'; 
	 break; 

	 case 'shape25': 
	 width = '198px'; 
	 height = '148px'; 
	 image = '/images/custom_collages/collage_25.png'; 
	 break; 

	 case 'shape26': 
	 width = '148px'; 
	 height = '198px'; 
	 image = '/images/custom_collages/collage_26.png'; 
	 break; 

	 case 'shape27': 
	 width = '99px'; 
	 height = '149px'; 
	 image = '/images/custom_collages/collage_27.png'; 
	 break; 

	 case 'shape28': 
	 width = '149px'; 
	 height = '99px'; 
	 image = '/images/custom_collages/collage_28.png'; 
	 break; 

	 case 'shape29': 
	 width = '103px'; 
	 height = '147px'; 
	 image = '/images/custom_collages/collage_29.png'; 
	 break; 

	 case 'shape30': 
	 width = '147px'; 
	 height = '103px'; 
	 image = '/images/custom_collages/collage_30.png'; 
	 break; 

	 case 'shape31': 
	 width = '147px'; 
	 height = '209px'; 
	 image = '/images/custom_collages/collage_31.png'; 
	 break; 

	 case 'shape32': 
	 width = '209px'; 
	 height = '147px'; 
	 image = '/images/custom_collages/collage_32.png'; 
	 break; 

	 case 'shape33': 
	 width = '198px'; 
	 height = '250px'; 
	 image = '/images/custom_collages/collage_33.png'; 
	 break; 

	 case 'shape34': 
	 width = '248px'; 
	 height = '198px'; 
	 image = '/images/custom_collages/collage_34.png'; 
	 break; 

	 case 'shape37': 
	 width = '136px'; 
	 height = '186px'; 
	 image = '/images/custom_collages/collage_37.png'; 
	 break; 

	 case 'shape38': 
	 width = '186px'; 
	 height = '136px'; 
	 image = '/images/custom_collages/collage_38.png'; 
	 break; 

	 case 'shape40': 
	 width = '136px'; 
	 height = '172px'; 
	 image = '/images/custom_collages/collage_40.png'; 
	 break; 

	 case 'shape41': 
	 width = '172px'; 
	 height = '136px'; 
	 image = '/images/custom_collages/collage_41.png'; 
	 break; 

	 case 'shape42': 
	 width = '122px'; 
	 height = '160px'; 
	 image = '/images/custom_collages/collage_42.png'; 
	 break; 

	 case 'shape43': 
	 width = '160px'; 
	 height = '122px'; 
	 image = '/images/custom_collages/collage_43.png'; 
	 break; 

	 case 'shape44': 
	 width = '208px'; 
	 height = '146px'; 
	 image = '/images/custom_collages/collage_44.png'; 
	 break; 

	 case 'shape45': 
	 width = '146px'; 
	 height = '208px'; 
	 image = '/images/custom_collages/collage_45.png'; 
	 break; 

	 case 'shape46': 
	 width = '98px'; 
	 height = '148px'; 
	 image = '/images/custom_collages/collage_46.png'; 
	 break; 

	 case 'shape47': 
	 width = '148px'; 
	 height = '98px'; 
	 image = '/images/custom_collages/collage_47.png'; 
	 break; 

	 case 'shape48': 
	 width = '146px'; 
	 height = '102px'; 
	 image = '/images/custom_collages/collage_48.png'; 
	 break; 

	 case 'shape49': 
	 width = '102px'; 
	 height = '146px'; 
	 image = '/images/custom_collages/collage_49.png'; 
	 break; 

	 case 'shape50': 
	 width = '122px'; 
	 height = '98px'; 
	 image = '/images/custom_collages/collage_50.png'; 
	 break; 

	 case 'shape51': 
	 width = '98px'; 
	 height = '122px'; 
	 image = '/images/custom_collages/collage_51.png'; 
	 break; 

	 case 'shape52': 
	 width = '110px'; 
	 height = '72px'; 
	 image = '/images/custom_collages/collage_52.png'; 
	 break; 

	 case 'shape53': 
	 width = '72px'; 
	 height = '110px'; 
	 image = '/images/custom_collages/collage_53.png'; 
	 break; 

	 case 'shape54': 
	 width = '98px'; 
	 height = '72px'; 
	 image = '/images/custom_collages/collage_54.png'; 
	 break; 

	 case 'shape55': 
	 width = '72px'; 
	 height = '98px'; 
	 image = '/images/custom_collages/collage_55.png'; 
	 break; 

	 case 'shape56': 
	 width = '86px'; 
	 height = '60px'; 
	 image = '/images/custom_collages/collage_56.png'; 
	 break; 

	 case 'shape57': 
	 width = '60px'; 
	 height = '86px'; 
	 image = '/images/custom_collages/collage_57.png'; 
	 break; 

	 case 'shape58': 
	 width = '72px'; 
	 height = '48px'; 
	 image = '/images/custom_collages/collage_58.png'; 
	 break; 

	 case 'shape59': 
	 width = '48px'; 
	 height = '72px'; 
	 image = '/images/custom_collages/collage_59.png'; 
	 break; 

	 case 'shape60': 
	 width = '53px'; 
	 height = '54px'; 
	 image = '/images/custom_collages/collage_60.png'; 
	 break; 

	 case 'shape61': 
	 width = '253px'; 
	 height = '254px'; 
	 image = '/images/custom_collages/collage_61.png'; 
	 break; 

	 case 'shape62': 
	 width = '227px'; 
	 height = '228px'; 
	 image = '/images/custom_collages/collage_62.png'; 
	 break; 

	 case 'shape63': 
	 width = '203px'; 
	 height = '204px'; 
	 image = '/images/custom_collages/collage_63.png'; 
	 break; 

	 case 'shape64': 
	 width = '191px'; 
	 height = '192px'; 
	 image = '/images/custom_collages/collage_64.png'; 
	 break; 

	 case 'shape65': 
	 width = '177px'; 
	 height = '178px'; 
	 image = '/images/custom_collages/collage_65.png'; 
	 break; 

	 case 'shape66': 
	 width = '165px'; 
	 height = '166px'; 
	 image = '/images/custom_collages/collage_66.png'; 
	 break; 

	 case 'shape67': 
	 width = '153px'; 
	 height = '154px'; 
	 image = '/images/custom_collages/collage_67.png'; 
	 break; 

	 case 'shape68': 
	 width = '141px'; 
	 height = '142px'; 
	 image = '/images/custom_collages/collage_68.png'; 
	 break; 

	 case 'shape69': 
	 width = '127px'; 
	 height = '128px'; 
	 image = '/images/custom_collages/collage_69.png'; 
	 break; 

	 case 'shape70': 
	 width = '115px'; 
	 height = '116px'; 
	 image = '/images/custom_collages/collage_70.png'; 
	 break; 

	 case 'shape71': 
	 width = '103px'; 
	 height = '104px'; 
	 image = '/images/custom_collages/collage_71.png'; 
	 break; 

	 case 'shape72': 
	 width = '91px'; 
	 height = '92px'; 
	 image = '/images/custom_collages/collage_72.png'; 
	 break; 

	 case 'shape73': 
	 width = '77px'; 
	 height = '78px'; 
	 image = '/images/custom_collages/collage_73.png'; 
	 break; 

	 case 'shape74': 
	 width = '65px'; 
	 height = '66px'; 
	 image = '/images/custom_collages/collage_74.png'; 
	 break; 

	 case 'shape75': 
	 width = '249px'; 
	 height = '249px'; 
	 image = '/images/custom_collages/collage_75.png'; 
	 break; 

	 case 'shape76': 
	 width = '223px'; 
	 height = '223px'; 
	 image = '/images/custom_collages/collage_76.png'; 
	 break; 

	 case 'shape77': 
	 width = '199px'; 
	 height = '199px'; 
	 image = '/images/custom_collages/collage_77.png'; 
	 break; 

	 case 'shape78': 
	 width = '187px'; 
	 height = '187px'; 
	 image = '/images/custom_collages/collage_78.png'; 
	 break; 

	 case 'shape79': 
	 width = '173px'; 
	 height = '173px'; 
	 image = '/images/custom_collages/collage_79.png'; 
	 break; 

	 case 'shape80': 
	 width = '161px'; 
	 height = '161px'; 
	 image = '/images/custom_collages/collage_80.png'; 
	 break; 

	 case 'shape81': 
	 width = '149px'; 
	 height = '149px'; 
	 image = '/images/custom_collages/collage_81.png'; 
	 break; 

	 case 'shape82': 
	 width = '137px'; 
	 height = '137px'; 
	 image = '/images/custom_collages/collage_82.png'; 
	 break; 

	 case 'shape83': 
	 width = '123px'; 
	 height = '123px'; 
	 image = '/images/custom_collages/collage_83.png'; 
	 break; 

	 case 'shape84': 
	 width = '111px'; 
	 height = '111px'; 
	 image = '/images/custom_collages/collage_84.png'; 
	 break; 

	 case 'shape85': 
	 width = '100px'; 
	 height = '99px'; 
	 image = '/images/custom_collages/collage_85.png'; 
	 break; 

	 case 'shape86': 
	 width = '87px'; 
	 height = '87px'; 
	 image = '/images/custom_collages/collage_86.png'; 
	 break; 

	 case 'shape87': 
	 width = '73px'; 
	 height = '73px'; 
	 image = '/images/custom_collages/collage_87.png'; 
	 break; 

	 case 'shape88': 
	 width = '61px'; 
	 height = '61px'; 
	 image = '/images/custom_collages/collage_88.png'; 
	 break; 

	 case 'shape89': 
	 width = '49px'; 
	 height = '49px'; 
	 image = '/images/custom_collages/collage_89.png'; 
	 break; 

	 case 'shape90': 
	 width = '98px'; 
	 height = '115px'; 
	 image = '/images/custom_collages/collage_90.png'; 
	 break; 

	 case 'shape91': 
	 width = '48px'; 
	 height = '66px'; 
	 image = '/images/custom_collages/collage_91.png'; 
	 break; 

	 case 'shape92': 
	 width = '60px'; 
	 height = '78px'; 
	 image = '/images/custom_collages/collage_92.png'; 
	 break; 

	 case 'shape93': 
	 width = '72px'; 
	 height = '90px'; 
	 image = '/images/custom_collages/collage_93.png'; 
	 break; 

	 case 'shape94': 
	 width = '136px'; 
	 height = '153px'; 
	 image = '/images/custom_collages/collage_94.png'; 
	 break; 

	 case 'shape95': 
	 width = '123px'; 
	 height = '140px'; 
	 image = '/images/custom_collages/collage_95.png'; 
	 break; 

	 case 'shape98': 
	 width = '49px'; 
	 height = '66px'; 
	 image = '/images/custom_collages/collage_98.png'; 
	 break; 

	 case 'shape150': 
	 width = '50px'; 
	 height = '75px'; 
	 image = '/images/custom_collages/collage_150.png'; 
	 break; 

	 case 'shape151': 
	 width = '60px'; 
	 height = '85px'; 
	 image = '/images/custom_collages/collage_151.png'; 
	 break; 

	 case 'shape152': 
	 width = '75px'; 
	 height = '100px'; 
	 image = '/images/custom_collages/collage_152.png'; 
	 break; 

	 case 'shape153': 
	 width = '74px'; 
	 height = '49px'; 
	 image = '/images/custom_collages/collage_153.png'; 
	 break; 

	 case 'shape155': 
	 width = '100px'; 
	 height = '75px'; 
	 image = '/images/custom_collages/collage_155.png'; 
	 break; 

	 case 'shape156': 
	 width = '74px'; 
	 height = '49px'; 
	 image = '/images/custom_collages/collage_156.png'; 
	 break; 

	 case 'shape157': 
	 width = '84px'; 
	 height = '59px'; 
	 image = '/images/custom_collages/collage_157.png'; 
	 break; 

	 case 'shape158': 
	 width = '84px'; 
	 height = '59px'; 
	 image = '/images/custom_collages/collage_158.png'; 
	 break; 

	 case 'shape159': 
	 width = '100px'; 
	 height = '75px'; 
	 image = '/images/custom_collages/collage_159.png'; 
	 break; 

	 case 'shape160': 
	 width = '100px'; 
	 height = '125px'; 
	 image = '/images/custom_collages/collage_160.png'; 
	 break; 

	 case 'shape161': 
	 width = '125px'; 
	 height = '100px'; 
	 image = '/images/custom_collages/collage_161.png'; 
	 break; 

	 case 'shape162': 
	 width = '125px'; 
	 height = '100px'; 
	 image = '/images/custom_collages/collage_162.png'; 
	 break; 

	 case 'shape163': 
	 width = '105px'; 
	 height = '150px'; 
	 image = '/images/custom_collages/collage_163.png'; 
	 break; 

	 case 'shape164': 
	 width = '150px'; 
	 height = '105px'; 
	 image = '/images/custom_collages/collage_164.png'; 
	 break; 

	 case 'shape165': 
	 width = '150px'; 
	 height = '105px'; 
	 image = '/images/custom_collages/collage_165.png'; 
	 break; 

	 case 'shape166': 
	 width = '100px'; 
	 height = '150px'; 
	 image = '/images/custom_collages/collage_166.png'; 
	 break; 

	 case 'shape167': 
	 width = '150px'; 
	 height = '100px'; 
	 image = '/images/custom_collages/collage_167.png'; 
	 break; 

	 case 'shape168': 
	 width = '150px'; 
	 height = '100px'; 
	 image = '/images/custom_collages/collage_168.png'; 
	 break; 

	 case 'shape169': 
	 width = '140px'; 
	 height = '180px'; 
	 image = '/images/custom_collages/collage_169.png'; 
	 break; 

	 case 'shape170': 
	 width = '180px'; 
	 height = '140px'; 
	 image = '/images/custom_collages/collage_170.png'; 
	 break; 

	 case 'shape171': 
	 width = '180px'; 
	 height = '140px'; 
	 image = '/images/custom_collages/collage_171.png'; 
	 break; 

	 case 'shape172': 
	 width = '200px'; 
	 height = '250px'; 
	 image = '/images/custom_collages/collage_172.png'; 
	 break; 

	 case 'shape173': 
	 width = '250px'; 
	 height = '200px'; 
	 image = '/images/custom_collages/collage_173.png'; 
	 break; 

	 case 'shape174': 
	 width = '250px'; 
	 height = '200px'; 
	 image = '/images/custom_collages/collage_174.png'; 
	 break; 

	 case 'shape176': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_176.png'; 
	 break; 

	 case 'shape204': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_204.png'; 
	 break; 

	 case 'shape205': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_205.png'; 
	 break; 

	 case 'shape206': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_206.png'; 
	 break; 

	 case 'shape207': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_207.png'; 
	 break; 

	 case 'shape208': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_208.png'; 
	 break; 

	 case 'shape209': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_209.png'; 
	 break; 

	 case 'shape210': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_210.png'; 
	 break; 

	 case 'shape211': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_211.png'; 
	 break; 

	 case 'shape212': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_212.png'; 
	 break; 

	 case 'shape213': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_213.png'; 
	 break; 

	 case 'shape255': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_255.png'; 
	 break; 

	 case 'shape256': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_256.png'; 
	 break; 

	 case 'shape257': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_257.png'; 
	 break; 

	 case 'shape258': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_258.png'; 
	 break; 

	 case 'shape259': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_259.png'; 
	 break; 

	 case 'shape260': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_260.png'; 
	 break; 

	 case 'shape261': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_261.png'; 
	 break; 

	 case 'shape262': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_262.png'; 
	 break; 

	 case 'shape263': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_263.png'; 
	 break; 

	 case 'shape264': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_264.png'; 
	 break; 

	 case 'shape265': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_265.png'; 
	 break; 

	 case 'shape267': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_267.png'; 
	 break; 

	 case 'shape268': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_268.png'; 
	 break; 

	 case 'shape270': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_270.png'; 
	 break; 

	 case 'shape271': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_271.png'; 
	 break; 

	 case 'shape272': 
	 width = '50px'; 
	 height = '58px'; 
	 image = '/images/custom_collages/collage_272.png'; 
	 break; 

	 case 'shape273': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_273.png'; 
	 break; 

	 case 'shape274': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_274.png'; 
	 break; 

	 case 'shape275': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_275.png'; 
	 break; 

	 case 'shape276': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_276.png'; 
	 break; 

	 case 'shape277': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_277.png'; 
	 break; 

	 case 'shape278': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_278.png'; 
	 break; 

	 case 'shape279': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_279.png'; 
	 break; 

	 case 'shape280': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_280.png'; 
	 break; 

	 case 'shape281': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_281.png'; 
	 break; 

	 case 'shape282': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_282.png'; 
	 break; 

	 case 'shape283': 
	 width = '50px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_283.png'; 
	 break; 

	 case 'shape303': 
	 width = '110px'; 
	 height = '127px'; 
	 image = '/images/custom_collages/collage_303.png'; 
	 break; 

	 case 'shape318': 
	 width = '87px'; 
	 height = '104px'; 
	 image = '/images/custom_collages/collage_318.png'; 
	 break; 

	 case 'shape319': 
	 width = '111px'; 
	 height = '127px'; 
	 image = '/images/custom_collages/collage_319.png'; 
	 break; 

	 case 'shape320': 
	 width = '137px'; 
	 height = '153px'; 
	 image = '/images/custom_collages/collage_320.png'; 
	 break; 

	 case 'shape321': 
	 width = '149px'; 
	 height = '166px'; 
	 image = '/images/custom_collages/collage_321.png'; 
	 break; 

	 case 'shape325': 
	 width = '61px'; 
	 height = '78px'; 
	 image = '/images/custom_collages/collage_325.png'; 
	 break; 

	 case 'shape326': 
	 width = '73px'; 
	 height = '90px'; 
	 image = '/images/custom_collages/collage_326.png'; 
	 break; 

	 case 'shape327': 
	 width = '99px'; 
	 height = '115px'; 
	 image = '/images/custom_collages/collage_327.png'; 
	 break; 

	 case 'shape328': 
	 width = '23px'; 
	 height = '40px'; 
	 image = '/images/custom_collages/collage_328.png'; 
	 break; 

	 case 'shape330': 
	 width = '148px'; 
	 height = '166px'; 
	 image = '/images/custom_collages/collage_330.png'; 
	 break; 

	 case 'shape331': 
	 width = '86px'; 
	 height = '103px'; 
	 image = '/images/custom_collages/collage_331.png'; 
	 break; 

	 case 'shape332': 
	 width = '122px'; 
	 height = '140px'; 
	 image = '/images/custom_collages/collage_332.png'; 
	 break; 

	 case 'shape333': 
	 width = '37px'; 
	 height = '54px'; 
	 image = '/images/custom_collages/collage_333.png'; 
	 break; 

	 case 'shape334': 
	 width = '188px'; 
	 height = '138px'; 
	 image = '/images/custom_collages/collage_334.png'; 
	 break; 

	 case 'shape335': 
	 width = '100px'; 
	 height = '113px'; 
	 image = '/images/custom_collages/collage_335.png'; 
	 break; 

	 case 'shape337': 
	 width = '175px'; 
	 height = '138px'; 
	 image = '/images/custom_collages/collage_337.png'; 
	 break; 

	 case 'shape338': 
	 width = '163px'; 
	 height = '125px'; 
	 image = '/images/custom_collages/collage_338.png'; 
	 break; 

	 case 'shape339': 
	 width = '150px'; 
	 height = '100px'; 
	 image = '/images/custom_collages/collage_339.png'; 
	 break; 

	 case 'shape340': 
	 width = '125px'; 
	 height = '100px'; 
	 image = '/images/custom_collages/collage_340.png'; 
	 break; 

	 case 'shape341': 
	 width = '113px'; 
	 height = '75px'; 
	 image = '/images/custom_collages/collage_341.png'; 
	 break; 

	 case 'shape342': 
	 width = '231px'; 
	 height = '106px'; 
	 image = '/images/custom_collages/collage_342.png'; 
	 break; 

	 case 'shape345': 
	 width = '215px'; 
	 height = '115px'; 
	 image = '/images/custom_collages/collage_345.png'; 
	 break; 

	 case 'shape346': 
	 width = '140px'; 
	 height = '115px'; 
	 image = '/images/custom_collages/collage_346.png'; 
	 break; 

	 case 'shape347': 
	 width = '175px'; 
	 height = '120px'; 
	 image = '/images/custom_collages/collage_347.png'; 
	 break; 

	 case 'shape349': 
	 width = '55px'; 
	 height = '100px'; 
	 image = '/images/custom_collages/collage_349.png'; 
	 break; 

	 case 'shape350': 
	 width = '56px'; 
	 height = '100px'; 
	 image = '/images/custom_collages/collage_350.png'; 
	 break; 

	 case 'shape351': 
	 width = '55px'; 
	 height = '100px'; 
	 image = '/images/custom_collages/collage_351.png'; 
	 break; 

	 case 'shape352': 
	 width = '56px'; 
	 height = '100px'; 
	 image = '/images/custom_collages/collage_352.png'; 
	 break; 

	 case 'shape353': 
	 width = '60px'; 
	 height = '78px'; 
	 image = '/images/custom_collages/collage_353.png'; 
	 break; 

	 case 'shape355': 
	 width = '25px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_355.png'; 
	 break; 

	 case 'shape356': 
	 width = '50px'; 
	 height = '25px'; 
	 image = '/images/custom_collages/collage_356.png'; 
	 break; 

	 case 'shape357': 
	 width = '38px'; 
	 height = '63px'; 
	 image = '/images/custom_collages/collage_357.png'; 
	 break; 

	 case 'shape358': 
	 width = '63px'; 
	 height = '38px'; 
	 image = '/images/custom_collages/collage_358.png'; 
	 break; 

	 case 'shape359': 
	 width = '50px'; 
	 height = '75px'; 
	 image = '/images/custom_collages/collage_359.png'; 
	 break; 

	 case 'shape360': 
	 width = '75px'; 
	 height = '50px'; 
	 image = '/images/custom_collages/collage_360.png'; 
	 break; 

	 case 'shape361': 
	 width = '63px'; 
	 height = '88px'; 
	 image = '/images/custom_collages/collage_361.png'; 
	 break; 

	 case 'shape362': 
	 width = '88px'; 
	 height = '63px'; 
	 image = '/images/custom_collages/collage_362.png'; 
	 break; 

	 case 'shape363': 
	 width = '75px'; 
	 height = '100px'; 
	 image = '/images/custom_collages/collage_363.png'; 
	 break; 

	 case 'shape364': 
	 width = '100px'; 
	 height = '75px'; 
	 image = '/images/custom_collages/collage_364.png'; 
	 break; 

	 case 'shape365': 
	 width = '75px'; 
	 height = '113px'; 
	 image = '/images/custom_collages/collage_365.png'; 
	 break; 

	 case 'shape366': 
	 width = '113px'; 
	 height = '100px'; 
	 image = '/images/custom_collages/collage_366.png'; 
	 break; 

	 case 'shape367': 
	 width = '100px'; 
	 height = '125px'; 
	 image = '/images/custom_collages/collage_367.png'; 
	 break; 

	 case 'shape368': 
	 width = '100px'; 
	 height = '150px'; 
	 image = '/images/custom_collages/collage_368.png'; 
	 break; 

	 case 'shape369': 
	 width = '200px'; 
	 height = '100px'; 
	 image = '/images/custom_collages/collage_369.png'; 
	 break; 

	 case 'shape370': 
	 width = '250px'; 
	 height = '125px'; 
	 image = '/images/custom_collages/collage_370.png'; 
	 break; 

	 case 'shape371': 
	 width = '300px'; 
	 height = '150px'; 
	 image = '/images/custom_collages/collage_371.png'; 
	 break; 

	 case 'shape372': 
	 width = '36px'; 
	 height = '36px'; 
	 image = '/images/custom_collages/collage_372.png'; 
	 break; 

	 case 'shape373': 
	 width = '27px'; 
	 height = '27px'; 
	 image = '/images/custom_collages/collage_373.png'; 
	 break; 

}

        duplicate.width = width;
        duplicate.height = height;
        duplicate.background = 'url('+image+')';	

    	xMoveTo(duplicate_name, 5, 5);

        //Define containing layer

        var msg = document.getElementById('form_elements');

        new_node_x = 'node' + count + '_x';
        new_node_y = 'node' + count + '_y';

        //Duplicate Dimension X

        var dim1x = document.getElementById("drag_original_x");
        var dim2x = dim1x.cloneNode(true);

        //Assign ID for Duplicate Dimesnion Layer X

        dim2x.setAttribute('id', new_node_x);
        dim2x.setAttribute('name', new_node_x);

        //Duplicate Dimension Y

        var dim1y = document.getElementById("drag_original_y");
        var dim2y = dim1y.cloneNode(true);

        //Create field to capture image.
        var nodeimg = dim1x.cloneNode(true);
        new_node_img = 'node' + count + '_img';
    
        nodeimg.setAttribute('id', new_node_img);
        nodeimg.setAttribute('name', new_node_img);
        nodeimg.setAttribute('class', 'imgalpha');
        nodeimg.setAttribute('value', '');
        

        //Create field to capture type.
        var nodetype = dim1x.cloneNode(true);
        new_node_type = 'node' + count + '_type';

        nodetype.setAttribute('id', new_node_type);
        nodetype.setAttribute('name', new_node_type);
        nodetype.setAttribute('value', type);
        
        //Create field to capture image.
        
/*        var nodeimg = dim1x.cloneNode(true);

        new_node_img = 'node' + count + '_img'; 

    

        nodetype.setAttribute('id', new_node_img);

        nodetype.setAttribute('name', new_node_img);

        nodetype.setAttribute('value', '');
*/
        
        //Assign ID for Duplicate Dimesnion Layer Y

        dim2y.setAttribute('id', new_node_y);
        dim2y.setAttribute('name', new_node_y);

        msg.appendChild(dim2x);
        msg.appendChild(dim2y);
        msg.appendChild(nodetype);
		msg.appendChild(nodeimg);
        document.getElementById(new_node_x).value = 5;
        document.getElementById(new_node_y).value = 5;

		//Check for double mat
        if($('#double_mat').attr('checked'))
        {
        	color = $('#mat_color2').val();
            name = $('#mat_color_name2').val();

			chgBackground2(color, name);        
        }
        getprice();

}

function create_collage(act)
{
	var obj = xGetElementById("drop1");
    var obj2 = xGetElementById("collagecreator");
	var width = xGetElementById("mat_width");
	var height = xGetElementById("mat_height");
	var color = xGetElementById("mat_color");
    var action = xGetElementById("action");
    
    action.value = act;

	width.value = xWidth(obj) - 2;
	height.value = xHeight(obj) - 2;
    
	color.value = xGetElementById("color").value;

	thisOne = xGetElementById("form_elements"); 

	counter = thisOne.getElementsByTagName("input");

	count = counter.length;

	alertText = '';

	for(i=0; i<count; i++)
	{
      		alertText += "Name: " +counter[i].name+ " Value: " + counter[i].value + "\n"
	}
	document.collagecreator.submit();
}


function show_grid(grid_size)
{
	//var grid = xGetElementById("grid");
    //var grid_size = grid.options[grid.selectedIndex].value;

    switch(grid_size)
    {
    	case "1cm":
        		bg = "url('/images/custom_collages/grid-1cm.png')";
        		break;
                
    	case "2cm":
        		bg = "url('/images/custom_collages/grid-2cm.png')";
        		break;

        case "3cm":
        		bg = "url('/images/custom_collages/grid-3cm.png')";
        		break;

        case "4cm":
        		bg = "url('/images/custom_collages/grid-4cm.png')";
        		break;

        case "5cm":
        		bg = "url('/images/custom_collages/grid-5cm.png')";
        		break;

        case "1inch":
        		bg = "url('/images/custom_collages/grid-1inch.png')";
        		break;

        case "2inch":
        		bg = "url('/images/custom_collages/grid-2inch.png')";
        		break; 

        default:
        		bg = '';
        		break;
    }

	var drop1 = xGetElementById("drop1").style;
	drop1.backgroundImage = bg;
}

function hide_grid()
{
	var drop1 = xGetElementById("drop1").style;
	drop1.backgroundImage = '';
    var selObj = xGetElementById('grid');
	selObj.selectedIndex = 0; 
}

function roundNumber(num, dec) 
{
    var result = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
    return result;
}

function convert(type)
{
	width = xGetElementById('nw');
    height = xGetElementById('nh');
    width_o = xGetElementById('nw').value;
    height_o = xGetElementById('nh').value;

	if(width_o != '' && height_o != '')
    {
        if(type == 'cm')
        {
        	//width.value = roundNumber(width_o * 2.54, 2);
            width.value = parseFloat(width_o * 2.54).toFixed(2);
            //height.value = roundNumber(height_o * 2.54, 2);
            height.value = parseFloat(height_o * 2.54).toFixed(2);
        }
        else
        {
        	//width.value = roundNumber(width_o / 2.54, 2);
            //height.value = roundNumber(height_o / 2.54, 2);           
            width.value = parseFloat(width_o / 2.54).toFixed(2);
            height.value = parseFloat(height_o / 2.54).toFixed(2);
        }
    }
}