var displayCode = false;


var currentId = 'Headings';
var root = 'http://www.elistingwizard.com/';
var oldString;	 
var oldObj = 'headingsLink';

//activate('Headings', 'headingsLink');

function activate(targetId, obj)
{     
    document.getElementById(currentId).style.display = "none";   
    
    document.getElementById(targetId).style.display = "";  
     
    currentId = targetId;	 
	
	document.getElementById(obj).style.color = '#dd4444'; 
	document.getElementById(oldObj).style.color = '#969696';
	  
	oldObj = obj;
}

function MenuMouseOver(obj)
{  
	
    if (obj.style.color == '#cccccc')
        obj.style.color = '#222222';    
   	
	obj.style.padding = '1px';  
	 
    obj.style.border = '2px solid #4A573D';
	
}

function MenuMouseOut(obj)
{   
    if (obj.style.color == '#222222')
        obj.style.color = '#cccccc';     
	
	obj.style.padding = '2px';	   
    obj.style.border = '1px solid #8c918b'; 
	
}

function Toggle()
{ 
    displayCode = !displayCode; 
}

function chgImg(obj)
{
	document.slideshow.src = obj.src;
}

function ImageMouseOver(obj)
{     
	obj.style.border = '4px solid #ffffff';
	
}
// Should be the same as the "thumbnail" style
function ImageMouseOut(obj)
{      
	obj.style.border = '4px solid #000000'; 
}

function AddScript(script_id, contents)
{  
	
    imagearray =  "NewImg = new Array (";
        
    for (i = 0; i < (numImages - 1); i++) 
    {     
        image = root + images[i];
        imagearray += "\"" + image + "\"" + ", ";
    }
	
    image = root + images[numImages - 1];
    imagearray += "\"" + image + "\"" ;
    imagearray += "); "
	
    var head = document.getElementById('listingContainer')
    var this_script_id = document.getElementById(script_id);
    //destroy before create:
    if(this_script_id) head.removeChild(this_script_id);
    //create:
    script = document.createElement('script');
    // for adding a separate .js file, use script.src:
    // script.src = 'myscript.js';
    // the simple way, use script.innerHTML for testing:   
	
    script.innerHTML = imagearray + "function chgImg(id) " 
            +"{ "    
            +"  document.slideshow.src = NewImg[id]; "    
           /+ "} ";		  
	
    script.type = 'text/javascript';
    script.id = script_id;
    head.appendChild(script);

}

   
function CreateListing()
{      
    // Collect the latest values from the form.   
	   
    title = document.getElementById("title").value;    
    backgroundImage = document.getElementById("backgroundImage").value;	  
    backgroundColour = document.getElementById("backgroundColour").value;	
    textColour = document.getElementById("textColour").value;	 
    borderColour = document.getElementById("borderColour").value;  
    textBackgroundColour = document.getElementById("textBackgroundColour").value;  
    subtitle = document.getElementById("subtitle").value;     
	itemDesc = document.getElementById("itemdesc").value;
    extraInfo1 = document.getElementById("extraInfo1").value;  
    extraInfo2 = document.getElementById("extraInfo2").value;      
    henry = document.getElementById("Images");    
	fred = henry.getElementsByTagName("input"); 
    numImages = 0;  
    images = new Array;

		
    for (i = 0; i < fred.length; i++)
    {	   
		
        if (fred[i].checked)
        {
            images[numImages] = fred[i].value;
            numImages++;
        }
    } 
	
        
	string = "";
   	scriptString=""; 
    
	    
	if (numImages > 1)
   	{   
			// Create the image change script. 
            scriptString = "<script type=\"text/javascript\"> ";   
            
            scriptString +=  "function chgImg(obj) " 
            +"{ "    
            +"  document.slideshow.src = obj.src; "     
            + "} " ;  
			
			scriptString +=  "function ImageMouseOver(obj)"
			+"{"   
			+"	obj.style.border = '4px solid #ffffff';"
			+"}";

			scriptString +=  "function ImageMouseOut(obj)"
			+ "{"    
			+"	obj.style.border = '4px solid #000000';"
			+"}";	

			
			                                                 
            scriptString+= "</script>";                                                               
  	} 
	
	
	// Style
	string += "<style type=\"text/css\"> ";
	string += "A { text-decoration: underline; color: #666666} ";  
	string += "A:visited, A:active { text-decoration: underline; color: #666666} ";
	string += "A:hover { text-decoration: none; color: #CC0000 } ";
	string += ".thumbnail { border: 4px solid #000000  } ";
	string += "</style>	";
	
	

   	string += "<div id=\"ebayarea\" style=\" ";	  
	string += "background-image: url('http://www.elistingwizard.com/backgrounds/" + backgroundImage + "');";
	
   	if (backgroundImage == "none")  
   		string += "background: " + backgroundColour + ";"; 
   	string += " color: " + textColour + "; width:100%; font:18px sans serif; text-align: center; border:0;\">"  
            + "<div style=\"margin:0 auto; width:650px; padding-top:5px; padding-bottom:5px; text-align: center; border: 0;\">"  
                + "<div id=\"ebaytitle\" style=\"width: 640px; margin-top: 20px; border: 3px solid " + borderColour + "; background: " +textBackgroundColour + ";\">"
                    + "<h2>" + title + "</h2>" 
                    + subtitle        
                + "</div> ";                             
             
            
	if (numImages > 0)
   	{   
            
                string +=
                "<div id=\"ebayimages\" style=\"width: 640px; margin-top: 20px; text-align: left; border: 3px solid " + borderColour + "; background:" + textBackgroundColour + "\"> ";
                 
                imageCount = 0;     
                
                if (numImages > 1)
                {  
                    string += "<center> Click on the thumbnails below to change the large image </center> ";
                    string += "<table border=1> ";      
                    imagesWide = 4;
                    if (numImages < 4)  
                        imagesWide = numImages;
                    width = Math.round((640 - ((imagesWide + 1) * 5)) / (imagesWide));   
                        
                    // Generate thumbnails.
                    for (i = 0; i < numImages; i++) 
                    {     
                        image = root + images[i];
                                        
                        if (imageCount == 0)
                        {
                            string += "<tr> ";
                        }  
                        string += "<td valign=center align=center width=" + width +  "px >";
				string += "<img class=\"thumbnail\" src=\"" + image + "\" width=100 onClick=\"chgImg(this);\" onMouseOver=\"ImageMouseOver(this);\" onMouseOut=\"ImageMouseOut(this);\"        /> </td> ";
                                        
                        imageCount++;
                        
                        if (imageCount == 4)
                        {
                            string += "</tr> ";   
                            imageCount = 0;
                        }       
                    }           
                    string+="</table> ";
                } 
                
                // Large image
                image = root + images[0]
                string +=
                "<img src=\"" + image + "\" name=\"slideshow\" width=640 /> ";
                
                string +=
                "</div> ";     
   	} 
			
            
	string += "<div id=\"ebaydescription\" style=\"width: 600px; padding: 20px; margin-top: 20px; margin-bottom: 20px;text-align: left; background:"  + textBackgroundColour + ";  border: 3px solid " + borderColour + ";\">"
                    + itemDesc             
            +" </div> ";  
            
  	if (extraInfo1 != "")
   	{ 
                string += "<div style=\"width: 600px; padding: 20px; margin-top: 20px; margin-bottom: 20px;text-align: left; background: " + textBackgroundColour + ";  border: 3px solid " + borderColour + ";\">"
                     + extraInfo1               
                + "</div> ";
   	}
   	if (extraInfo2 != "")
  	{  
                string += "<div style=\"width: 600px; padding: 20px; margin-top: 20px; margin-bottom: 20px;text-align: left; background:" + textBackgroundColour + ";  border: 3px solid " + borderColour + ";\">"
                     + extraInfo2               
                + "</div> ";
   	}   
    
	
	
	
	
	// A bit of self promotion!
	string += "<span align=center style=\"font-size:18px;padding: 5px; margin-bottom: 5px; background: black; color:silver;\">"
        		+  "Created by <a href=\"http://www.elistingwizard.com\" target=\"_blank\">eListingWizard</a> eBay Listing Editor"
    		   +"</span>";	               
                
			   
	// The end			   
		+"</div>";  
		
		     
  	if (displayCode)
   	{     
    /*
        echo" <div style=\"height: 280px; \"> ";                     
        echo "<br> ";
        echo "<img align=right src=\"listing.jpg\" \> ";
        echo "<br><br>Copy and paste the following code into your eBay item description. Click
        the \"Enter your own HTML\" tab first. <br><br>";
        echo "You won't be able to use the eBay styling to modify your listing, but if you understand HTML, 
                then you could add your own finishing touches.<br> ";     
        
        echo"</div> "; 
        echo"<h1></h1> ";      
        */   			 
		
        string = scriptString + string;
        string = string.replace(/</g, "&lt;");
        string = string.replace(/\n/g, "<br>");    
		
		tempString = " <form> <TEXTAREA NAME=\"output\"  ROWS=\"15\" COLS=\"95\" > ";	 
		
		string = tempString + string; 
		
		string += "  </textarea  ><center><br><input type=\"button\" value=\"Select All Code\"  ";
		string += "	onClick=\"javascript:this.form.output.focus();this.form.output.select();   ";
		string += "	\" style=\"color:#333333;border-width:5px;border-color:#CCCCCC;background-color:#CCCCCC;\"></center>  ";	 
		
  	} 
   	else if (numImages > 1)
   	{
        //AddScript("myscript", scriptString);	 
   	}				   
	  
	// Only update if something has changed.
	if (string != oldString)
	{		   
      		document.getElementById("listingContainer").innerHTML =string;	
			oldString = string;
	}	
    
	
   
    setTimeout("CreateListing()",200);
}


onload = CreateListing;