//*************** Main Javascript control using Prototype nad Scriptaculous ***************//
//     25/01/2008
//******************************************************************************//
//Calls main test function after page has loaded
Event.observe(window,'load',test, true);

//Global variables
var middlePos =0;
var imgNodeList;
var elt;
var i;
var imgid;
var currentSliderPosition = 0;
var myslider;
var sliderMove ;
var gallery_pane_width = 0;


//Server connection test *******************************************
  var oGlobalOptions = {
            onCreate : function () {
                $("item_code").innerHTML = 
                                                        "Contacting the server...";
            },
            onComplete : function () {
                $("item_code").innerHTML = 
                                                              "Response received.";
            }
        };
       
//Ajax.Responders.register(oGlobalOptions);		
			
//*****************Main AJAX function ************************************

function ajaxFunction(url){
var pars = "?template=indiv_items_ajax";
new Ajax.Request(
			url, 
			{
				method: 'get', 
				parameters: pars, 
				onSuccess: showResponse
			});


function showResponse(originalRequest)
	{
		var xmlDoc = originalRequest.responseXML;
		
		
		var tag_ih = xmlDoc.getElementsByTagName("item_heading")[0];
var val_ih = tag_ih.firstChild.nodeValue;
				
				//blindGoDown('item_heading');
$('item_heading').innerHTML = val_ih;
				
var tag_id = xmlDoc.getElementsByTagName("item_description")[0];
var val_id = tag_id.firstChild.nodeValue;
blindGoDown('item_description');
				$('item_description').innerHTML = val_id;
				
//var tag_finish = xmlDoc.getElementsByTagName("finish")[0];
//var val_finish = tag_finish.firstChild.nodeValue;
				//$('item_colours').innerHTML = val_finish;
				
var tag_prices = xmlDoc.getElementsByTagName("prices")[0];
var val_prices = tag_prices.firstChild.nodeValue;
				$('type_and_price').innerHTML = val_prices;	
		
				
		var tag_itm = xmlDoc.getElementsByTagName("item_main_image")[0];
        var val_itm = tag_itm.firstChild.nodeValue;		
		
		//alert(val_itm);
				//Get the src value
				var str2 = val_itm.split('"',2);				
				var newImage 	= null;
					newImage 		= new Image();
					newImage.src 	= str2[1];						
					
					
                   if (newImage.complete) {	
						//$('m_image').innerHTML = val_itm;	
						//alert(imgid);
						buildSlide(newImage.src,(imgid));
}else{
	
	$('m_image').innerHTML = "<img src='assets/images/spinner2.gif' alt='' border='0' />";
	newImage.onload = function() {	
		buildSlide(newImage.src,(imgid));
		//$('m_image').innerHTML = val_itm;
							
						}
					}




			}
}


  //Eof AJAX

//**************Main event listner function ********************************************* 
function test(e){
	

	 imgNodeList = $('data').getElementsByClassName('image_link');
	var cnt = -1;
		$A(imgNodeList).each(function (i, cnt){
		gallery_pane_width += i.getWidth();
		 $('data').setStyle({
        width: gallery_pane_width + 'px'
		
    });

Event.observe(i, 'mouseover', thumbMouseOver);
Event.observe(i, 'mouseout',  popUpHide);

Event.observe(i, 'click', function(e){ 
elt = Event.findElement(e, 'img'); 
imgid ='imgid' + cnt

//Call to AJAX function **********************	
ajaxFunction(i.readAttribute('href'));
if(itemDetails){
Event.stop(e);
}
}

);
})
		//Builds scroll bar if needed *********************
		buildScrollBar();
		
if ($('left_arrow')) {

	 Event.observe($('left_arrow'), 'click', clickPreviousScroll);
	}	
	if ($('right_arrow')) {

	 Event.observe($('right_arrow'), 'click', clickNextScroll);
		
	
	  myslider=  new Control.Slider('handle1','track1',{
      sliderValue:1,
	  range: $R(0, 100),
     onSlide:function(v){

	 currentSliderPosition = v;
	  updateScrolling(v)
	  },
      onChange:function(v){updateScrolling(v)
	  }
	  });
			
	sliderMove = Math.round(100/ $('data').getElementsByClassName('image_link').length +1);
		
	}

	function clickPreviousScroll(e) {
   if (currentSliderPosition > sliderMove ){
        currentSliderPosition = currentSliderPosition - sliderMove;
    } else {
        currentSliderPosition = 0;
    }
    myslider.setValue(currentSliderPosition);
    updateScrolling(currentSliderPosition);

    Event.stop(e);

}
function clickNextScroll(e) {
   
    if (currentSliderPosition < 100 - sliderMove ){
        currentSliderPosition = currentSliderPosition + sliderMove;
    } else {
        currentSliderPosition = 100;
    }
	
    myslider.setValue(currentSliderPosition);
    updateScrolling(currentSliderPosition);
    Event.stop(e);
}
}
//End of main function - test **********************************


function buildSlide(newSlideSrc,imgid) {
	// create new image	
	var newSlide = Builder.node('img', {src: newSlideSrc, style: 'display: none',id: imgid});
	var container = $('m_image');
	container.appendChild(newSlide);
	
	
	Effect.Appear(imgid, {duration: 0.5, afterFinish: function() {
	   $A($('m_image').getElementsByTagName('img')).each(function(i,cnt){
            	if($(i).readAttribute('id')!=imgid){
            $(i).remove();
			}
       
    });
		
	}});
	
	//Event.observe(newSlide, 'load', transitionSlide);
//Event.stop(e);
}

function updateScrolling(v){

    a = (gallery_pane_width-614)/100;
    $('data').setStyle({
       left: '-' + (a*v) + 'px' 
	   //
	   
    });
	
   updateThumbnailsHighlite(Math.round(v/sliderMove));
}

function thumbMouseOver(e) {

 var link = Event.findElement(e,'a');
 removeClassFromAll($('data'), 'thumb_on');
 //popUpHide($('data'));
 link.down().addClassName('thumb_on');
 link.up().firstChild.style.display = 'block';
 Event.stop(e);
 //alert('hello')
}
function popUpHide (){
	
	$A($('data').getElementsByTagName('div')).each(function(i,cnt){
		$(i).style.display='none';
		//i.addClassName('thumb_on');
															});
	//return e;
	}


function removeClassFromAll(elem, classToRemove){
    Element.extend(elem);
    $A(elem.getElementsByClassName(classToRemove)).each(function(i) {
        i.removeClassName(classToRemove);
    });
    return elem;
}
function updateThumbnailsHighlite(thumb_number) {
//$A(images[1].addClassName('thumb_on'));
//alert(thumb_number);
    removeClassFromAll($('data'), 'thumb_on');
    $A($('data').getElementsByTagName('img')).each(function(i,cnt){
      //if (cnt == thumb_number && i.hasClassName('imageLoaded') ) {
        if (cnt == thumb_number) {
           $(i).addClassName('thumb_on');
            
        }
    });
}
function buildScrollBar(){
	if ($('data').getWidth() >= 615){
		//alert($('data').getWidth());

$('scroll_bar').innerHTML ="<div id='left_arrow'></div><div id='track1'><div id='handle1'></div></div><div id='right_arrow'></div>";
		}
	
	}
function  getMiddlePosition (middlePos) {

var cnst = (gallery_pane_width /$('data').getElementsByClassName('image_link').length) /2 -15 

var nodeTest = imgNodeList;



if (nodeTest[0].down('img').readAttribute('class')=='thumb_on' || nodeTest[17].down('img').readAttribute('class')=='thumb_on'){
//$('data').childNodes[0].addClassName('here');
middlePos =0;
}
else{
middlePos =cnst;
}

return middlePos;
}

function blindGoDown (e)
{

new Effect.BlindDown(e, {duration:.5});

}