// javascript functionality for Celia's site, depends on Prototype 1.6.0.3
// by David Coleman

/* showContentImage()
*
*  Purpose: Display a scaled image in the content img element and the
*           image's details in the details <ul>
*   Params: Path to image (used as an id)
*  Returns: N/A
*
*/
function showContentImage(imageSrc) {
    var contentImg = new Image();
    
    
    contentImg.onload = function() {
        // once image is loaded, get dimensions and resize
    	// according to the scale of the new image
    	
		// get image and div dimensions
		var contentDiv = $("image_content");
		var imgHeight = contentImg.height;
		var imgWidth  = contentImg.width;
		var divHeight = contentDiv.clientHeight;
		var divWidth  = contentDiv.clientWidth;

		// get height and width ratios 
		var scaleHeight = divHeight / imgHeight;
		var scaleWidth = divWidth / imgWidth;

		// scale the content <img> element based on above ratios
		if (scaleHeight < scaleWidth) {
			$('content_img').height = divHeight;
			$('content_img').width = Math.round(imgWidth * scaleHeight);
		} else {
			$('content_img').width = divWidth;
			$('content_img').height = Math.round(imgHeight * scaleWidth);
		}
		$('content_img').src = contentImg.src;
		// hide spinner
		$('spinner').style.display = 'none';
		// show content image
		$('content_img').style.display = 'block';
	}
    
	// hide content image
	$('content_img').style.display = 'none';
	// show spinner
	$('spinner').style.display = 'block';
	// remove "/thumbs" from src path to get full size image src path
	var src = imageSrc.replace(/thumbs\//, '');
	src = src.replace(/^.*\.(local|com|)\//, '');
	contentImg.src = src;
   	showImageDetails(src);
	
	
	

}

function removeHTMLTags(htmlString){
        if(htmlString){
          var mydiv = document.createElement("div");
           mydiv.innerHTML = htmlString;
 
            if (document.all) // IE Stuff
            {
                return mydiv.innerText;
               
            }   
            else // Mozilla does not work with innerText
            {
                return mydiv.textContent;
            }                           
      }
   }

/*
function showImageDetails1(imageSrc) {
	var xmlDoc;
	new Ajax.Request("images/images.xml", {
		method: "get",
		onSuccess: function(xhr) {
			xmlDoc = xhr.responseXML;
			var imageElement    = getImageElementById(xmlDoc, imageSrc);
			var imageTitle      = imageElement.getElementsByTagName('title')[0].firstChild.nodeValue;
			var imageMaterials  = imageElement.getElementsByTagName('materials')[0].firstChild.nodeValue;
			var imageDimensions = imageElement.getElementsByTagName('dimensions')[0].firstChild.nodeValue; 
			
            var list = '<ul>';
            list += '<li id="title">'+imageTitle+'</li>';
            list += '<li id="materials">'+imageMaterials+'</li>';
            list += '<li id="dimensions">'+imageDimensions+'</li>';
            list += '</ul>';
            alert(list);
            $('details').update(list);
			$('details').style.display = 'block';
		},
		onFailure: function(xhr) {
			alert(xhr.response);
		}
	});
		
		
}
*/


/*
function showImageDetails2(imageSrc) {
	var imagesJSON;
	new Ajax.Request("/images.json", {
        method:'get',
		onSuccess: function(xhr) {
		    alert(xhr.responseText);
			imagesJSON          = eval(xhr.responseText);
			var imageObj        = getImageObjById(imagesJSON, imageSrc);
			var imageTitle      = imageObj['title'];
            var imageMaterials  = imageObj['materials'];
            var imageDimensions = imageObj['dimensions'];
			
			var list = '<ul>';
            list += '<li id="title">'+imageTitle+'</li>';
            list += '<li id="materials">'+imageMaterials+'</li>';
            list += '<li id="dimensions">'+imageDimensions+'</li>';
            list += '</ul>';
            
            $('details').update(list);
			$('details').style.display = 'block';
            
		},
		onFailure: function(xhr) {
		    alert(xhr.status);
		}        
	});
}
*/

function showImageDetails(imageSrc) {
	var imagesObj       = getImagesObj();
	var imageObj        = getImageObjById(imagesObj.images, imageSrc);
	var imageTitle      = imageObj['title'];
    var imageMaterials  = imageObj['materials'];
    var imageDimensions = imageObj['dimensions'];
	
	var list = '<ul>';
	if (imageTitle) {
        list += '<li id="title">'+imageTitle+'</li>';	    
	}
    if (imageMaterials) {
        list += '<li id="materials">'+imageMaterials+'</li>';        
    }
    if (imageDimensions) {
        list += '<li id="dimensions">'+imageDimensions+'</li>';        
    }

    list += '</ul>';
    
    $('details').update(list);
	$('details').style.display = 'block';
}


function getImageElementById(xmlDoc,id) {
	var imageTags = xmlDoc.getElementsByTagName('image');
	for (i = 0; i < imageTags.length; i++) {
		Element.extend(imageTags[i]);
		if (imageTags[i].hasAttribute('id')) {
			if (imageTags[i].getAttribute('id') == id) {
				return imageTags[i];
			}
		}
	}
}


function getImageObjById(images, id) {
    for (var i = 0; i < images.length; i++) {
        if (images[i]['id'] == id) {
            return images[i];
        }
    }
}


/* ! this must be updated when a new image is added ! */
function getImagesObj() {
    return {
        images:[
                {
                    id:'images/jpgs/drawings/1.jpg',
                    title:'Floral Series (blue), 2010',
                    materials:'marker, colored pencil',
                    dimensions:'22in x 30in'
                },
                {
                    id:'images/jpgs/drawings/2.jpg',
                    title:'Floral Series (green), 2010',
                    materials:'marker, colored pencil',
                    dimensions:'22in x 30in'
                },
                {
                    id:'images/jpgs/drawings/3.jpg',
                    title:'Untitled, 2010',
                    materials:'pencil, colored pencil',
                    dimensions:'14in x 17in'
                },
                {
                    id:'images/jpgs/drawings/4.jpg',
                    title:'Diamond Stack, 2010',
                    materials:'paper strips, marker, pen',
                    dimensions:'9in x 15.5in'
                },
                {
                    id:'images/jpgs/sugarads/1.jpg',
                    title:'Sugar Ads Series 1, 2010',
                    materials:'archival inkjet print',
                    dimensions:'12in x 18in'
                },
                {
                    id:'images/jpgs/sugarads/2.jpg',
                    title:'Sugar Ads Series 2, 2010',
                    materials:'archival inkjet print',
                    dimensions:'12in x 18in'
                },
                {
                    id:'images/jpgs/sugarads/3.jpg',
                    title:'Sugar Ads Series 3, 2010',
                    materials:'archival inkjet print',
                    dimensions:'12in x 18in'
                },
                {
                    id:'images/jpgs/sugarads/4.jpg',
                    title:'Sugar Ads Series 4, 2010',
                    materials:'archival inkjet print',
                    dimensions:'12in x 18in'
                },
                {
                    id:'images/jpgs/sugarads/5.jpg',
                    title:'Sugar Diptych 1, 2011',
                    materials:'archival inkjet print',
                    dimensions:'22in x 34in'
                },
                {
                    id:'images/jpgs/sugarads/6.jpg',
                    title:'Sugar Gloss, 2011',
                    materials:'archival inkjet print',
                    dimensions:'20in x 24in'
                },
                {
                    id:'images/jpgs/sugarads/7.jpg',
                    title:'Sugar Mouth, 2011',
                    materials:'archival inkjet print',
                    dimensions:'17in x 22in'
                },
                {
                    id:'images/jpgs/sugarbows/1.jpg',
                    title:'Large Sugar Bow with Pedestal, detail, 2010',
                    materials:'pulled sugar, cardboard, paint, spackle',
                    dimensions:'60in tall'
                },
                {
                    id:'images/jpgs/sugarbows/2.jpg',
                    title:'Small Sugar Bow with Pedestal, 2010',
                    materials:'pulled sugar, cardboard, paint, spackle',
                    dimensions:'15in tall'
                },
                {
                    id:'images/jpgs/sugarbows/3.jpg',
                    title:'Sugar Pedestal, 2010',
                    materials:'cast sugar, ribbon, pedestal',
                    dimensions:'9in x 9in x 60in'
                },
                {
                    id:'images/jpgs/sugarbows/4.jpg',
                    title:'Drip Series (pink), 2010',
                    materials:'blown sugar, satin',
                    dimensions:'12in x 8in'
                },
                {
                    id:'images/jpgs/sugarbows/5.jpg',
                    title:'Drip Series (plaid), 2010',
                    materials:'blown sugar, wool suiting',
                    dimensions:'20in x 27in'
                },
                {
                    id:'images/jpgs/sugarbows/6.jpg',
                    title:'Sugar Combs, 2010',
                    materials:'pulled sugar, cast sugar',
                    dimensions:'3ft x 3ft'
                },
                {
                    id:'images/jpgs/sugarbows/7.jpg',
                    title:'Sugar Combs (mauve), 2010',
                    materials:'pulled sugar, cast sugar, velvet',
                    dimensions:'16in x 24in'
                },
                {
                    id:'images/jpgs/sugargazing/1.jpg',
                    title:'Sugar Gazing, 2011',
                    materials:'C print',
                    dimensions:'20in x 24in'
                },
                {
                    id:'images/jpgs/sugargazing/2.jpg',
                    title:'Sugar Gazing, installation detail, 2011',                    
                    materials:'',
                    dimensions:''
                },
                {
                    id:'images/jpgs/sugargazing/3.jpg',
                    title:'Sugar Gazing, installation view, 2011',
                    materials:'C print, sugar encrusted bucket and ropes',                    
                    dimensions:''
                }
            ]
    }
}