// define thumbnail images for each state
// (normal, highlight, click)
var thumbnailData = new Array();
thumbnailData[1] = new Array('images/summer/img_sm_1.jpg', 'images/summer/img_sm_1_on.jpg', 'images/summer/img_sm_1_on.jpg');
thumbnailData[2] = new Array('images/summer/img_sm_2.jpg', 'images/summer/img_sm_2_on.jpg', 'images/summer/img_sm_2_on.jpg');
thumbnailData[3] = new Array('images/summer/img_sm_3.jpg', 'images/summer/img_sm_3_on.jpg', 'images/summer/img_sm_3_on.jpg');
thumbnailData[4] = new Array('images/summer/img_sm_4.jpg', 'images/summer/img_sm_4_on.jpg', 'images/summer/img_sm_4_on.jpg');
thumbnailData[5] = new Array('images/summer/img_sm_5.jpg', 'images/summer/img_sm_5_on.jpg', 'images/summer/img_sm_5_on.jpg');
thumbnailData[6] = new Array('images/summer/img_sm_6.jpg', 'images/summer/img_sm_6_on.jpg', 'images/summer/img_sm_6_on.jpg');
thumbnailData[7] = new Array('images/summer/img_sm_7.jpg', 'images/summer/img_sm_7_on.jpg', 'images/summer/img_sm_7_on.jpg');
thumbnailData[8] = new Array('images/summer/img_sm_8.jpg', 'images/summer/img_sm_8_on.jpg', 'images/summer/img_sm_8_on.jpg');
thumbnailData[9] = new Array('images/summer/img_sm_9.jpg', 'images/summer/img_sm_9_on.jpg', 'images/summer/img_sm_9_on.jpg');
thumbnailData[10] = new Array('images/summer/img_sm_10.jpg', 'images/summer/img_sm_10_on.jpg', 'images/summer/img_sm_10_on.jpg');
thumbnailData[11] = new Array('images/summer/img_sm_11.jpg', 'images/summer/img_sm_11_on.jpg', 'images/summer/img_sm_11_on.jpg');  
thumbnailData[12] = new Array('images/summer/img_sm_12.jpg', 'images/summer/img_sm_12_on.jpg', 'images/summer/img_sm_12_on.jpg'); 
thumbnailData[13] = new Array('images/summer/img_sm_13.jpg', 'images/summer/img_sm_13_on.jpg', 'images/summer/img_sm_13_on.jpg'); 
thumbnailData[14] = new Array('images/summer/img_sm_14.jpg', 'images/summer/img_sm_14_on.jpg', 'images/summer/img_sm_14_on.jpg'); 
thumbnailData[15] = new Array('images/summer/img_sm_15.jpg', 'images/summer/img_sm_15_on.jpg', 'images/summer/img_sm_15_on.jpg'); 
thumbnailData[16] = new Array('images/summer/img_sm_16.jpg', 'images/summer/img_sm_16_on.jpg', 'images/summer/img_sm_16_on.jpg'); 
thumbnailData[17] = new Array('images/summer/img_sm_17.jpg', 'images/summer/img_sm_17_on.jpg', 'images/summer/img_sm_17_on.jpg'); 
thumbnailData[18] = new Array('images/summer/img_sm_18.jpg', 'images/summer/img_sm_18_on.jpg', 'images/summer/img_sm_18_on.jpg'); 
thumbnailData[19] = new Array('images/summer/img_sm_19.jpg', 'images/summer/img_sm_19_on.jpg', 'images/summer/img_sm_19_on.jpg'); 
thumbnailData[20] = new Array('images/summer/img_sm_20.jpg', 'images/summer/img_sm_20_on.jpg', 'images/summer/img_sm_20_on.jpg'); 
thumbnailData[21] = new Array('images/summer/img_sm_21.jpg', 'images/summer/img_sm_21_on.jpg', 'images/summer/img_sm_21_on.jpg'); 
thumbnailData[22] = new Array('images/summer/img_sm_22.jpg', 'images/summer/img_sm_22_on.jpg', 'images/summer/img_sm_22_on.jpg'); 
thumbnailData[23] = new Array('images/summer/img_sm_23.jpg', 'images/summer/img_sm_23_on.jpg', 'images/summer/img_sm_23_on.jpg'); 
thumbnailData[24] = new Array('images/summer/img_sm_24.jpg', 'images/summer/img_sm_24_on.jpg', 'images/summer/img_sm_24_on.jpg'); 
thumbnailData[25] = new Array('images/summer/img_sm_25.jpg', 'images/summer/img_sm_25_on.jpg', 'images/summer/img_sm_25_on.jpg'); 
thumbnailData[26] = new Array('images/summer/img_sm_26.jpg', 'images/summer/img_sm_26_on.jpg', 'images/summer/img_sm_26_on.jpg'); 
thumbnailData[27] = new Array('images/summer/img_sm_27.jpg', 'images/summer/img_sm_27_on.jpg', 'images/summer/img_sm_27_on.jpg'); 
thumbnailData[28] = new Array('images/summer/img_sm_28.jpg', 'images/summer/img_sm_28_on.jpg', 'images/summer/img_sm_28_on.jpg'); 
thumbnailData[29] = new Array('images/summer/img_sm_29.jpg', 'images/summer/img_sm_29_on.jpg', 'images/summer/img_sm_29_on.jpg'); 
thumbnailData[30] = new Array('images/summer/img_sm_30.jpg', 'images/summer/img_sm_30_on.jpg', 'images/summer/img_sm_30_on.jpg'); 
thumbnailData[31] = new Array('images/summer/img_sm_31.jpg', 'images/summer/img_sm_31_on.jpg', 'images/summer/img_sm_31_on.jpg'); 

// store the ID of the currently clicked button
var currentSelection = -1; // -1 = initial dummy value



// function to load large image and turn on selected state for thumbnail
function changeImg(number) {
   if (document.images) { 
     document.images['mainImage'].src=('images/summer/img_lg_' + number + '.jpg');  
   }
}



// function to change button state on hover
function highlightItem(obj, state) {
 // get button ID
 i = obj.getAttribute('id');

 // check if it is currently clicked
 // if not, change state (normal=0, highlight=1)
 if (i != currentSelection) {
   if (state == 1) {
     obj.setAttribute('src', thumbnailData[i][1]);
   } else {
     obj.setAttribute('src', thumbnailData[i][0]);
   }
 }
}


// function to change thumbnail state on click
function selectItem(obj) {
 // get thumbnail ID
 i = obj.getAttribute('id');
  
 // reset all thumbnail images to normal
 tbar = document.getElementById('tobechanged');
 items = tbar.getElementsByTagName('img');
 for (x = 0; x < items.length; x++) {	 			
 items[x].setAttribute('src', thumbnailData[(x+1)][0]);
 }

 // set selected thumbnail to click state
 obj.setAttribute('src', thumbnailData[i][2]);

 // publish ID of clicked button
 currentSelection = i;
 
}