window.addEvent('load', function(){


	var viewcolourops = $('view_colour_options');
	var viewcolourops2 = $('view_colour_options2');
	var colourops = $('colour_options');
	var featuresicons = $('featuresicons');
	var saddlefeatures = $('saddlefeatures');

	if(featuresicons){
		var featurestips = new Tips($$('#featuresicons .icon'), {
			className: 'featurestip',
			maxTitleChars: 100
		});
	}

	
	if(saddlefeatures){

var accordion = new Accordion('#saddlefeatures .featurename', '#saddlefeatures .featureinfo', {
	opacity: false,
	display: -1,
	alwaysHide: true,
	onActive: function(toggler, element){
		//toggler.setStyle('color', '#ff3300');
	},
 
	onBackground: function(toggler, element){
		//toggler.setStyle('color', '#222');
	}
}, $('saddlefeatures'));

	}
	

	if(colourops){

		var colourslide = new Fx.Slide(colourops, {duration: 500});
		colourslide.hide() //toggle the slider up and down.

		viewcolourops.setStyle('cursor','pointer');


		viewcolourops.addEvent('click', function(){
			colourslide.toggle();
		});
		viewcolourops2.addEvent('click', function(){
			colourslide.slideIn();
		});
	}

	
	var fullblock = $('fullblock');
	var innerblock = fullblock.getFirst();
	var replace;
	var toggler = $('zoomtoggle');

	if(toggler){
		var thumbsblock = $('thumbs');
		var thumbs = $$('.thumb');
		var imgsrc = $$('#fullblock img')[0].getProperty('src');
		var imgfile = getFile(imgsrc);
		var clickedthumb;

		var zoomstate = 0;

		var toreplace;
		
		var blockheight = fullblock.getFirst().getFirst().getSize().size.y;
		var blockwidth = fullblock.getFirst().getFirst().getSize().size.x;
		fullblock.setStyles({
			'height':blockheight,
			'width':blockwidth,
			'overflow':'hidden'//,
		//	'cursor':'-moz-zoom-in'
		});
		
		var fx = new Fx.Style(innerblock, 'opacity', {duration:800,onComplete: togglestate});


		thumbs.each(function(el){
			el.addEvent('click',swapthumb);
			el.setStyle('cursor','pointer');
		});

		toggler.addEvent('click',swap);

		
		
	}
	
	function swapthumb(){
		el = this;
				
		new Element('img',{'src':'../_lib/_images/_structure/loading.gif'}).injectInside(innerblock.empty());

		var thumbfile = getFile(this.getFirst().getProperty('src'));
		var endthumb = this.hasClass('end_thumb');
		//console.log(endthumb);
		
		
		var newfull = new Asset.images('../_data/Image/products/full/'+thumbfile,{
			onComplete:function(){
				//toreplace.replaceWith(this)
				fx.hide();

				var newreplaced = newfull.injectInside(innerblock.empty());

				var newthumb = new Element('div',{'class':'thumb'+(endthumb?' end_thumb':'')}).injectAfter(el);

				new Element('img',{'src':'../_data/Image/products/thumbs/'+imgfile}).injectInside(newthumb);
				newthumb.addEvent('click',swapthumb);
				//console.log('../_data/Image/products/thumbs/'+imgfile);

				imgfile = thumbfile;
				toggler.setText("Zoom in (+)");
				zoomstate = 0;
				el.remove();

				fx.start(1);
			}
		});
	}
	
	function getFile(src){
		return src.substring(src.lastIndexOf("/") + 1);
	}



	function swap(){
		var zoomlevel = zoomstate?'full':'zoom';
		//toreplace = $$('#fullblock img');

		new Element('img',{'src':'../_lib/_images/_structure/loading.gif'}).injectInside(innerblock.empty());

		replace = new Asset.images('../_data/Image/products/'+zoomlevel+'/'+imgfile,{
			onComplete:function(){
				//toreplace.replaceWith(this)
				fx.hide();

				var replaced = replace.injectInside(innerblock.empty());
				
				yoffset = -(replace.getStyle('height')[0].toInt()/2)+(blockheight.toInt()/2);
				xoffset = -(replace.getStyle('width')[0].toInt()/2)+(blockwidth.toInt()/2);
				
				replace.setStyles({
					position: 'relative',
					top: yoffset+'px',
					left: xoffset+'px'
				});

				fx.start(1);

				if(!zoomstate){
					toggler.setText("Zoom out (-)");
				}else{
					toggler.setText("Zoom in (+)");
				}
				zoomstate = !zoomstate;
				
			}
		});
	}
	function togglestate(){

		if(zoomstate){
			//console.log(blockheight.toInt());
			//console.log(replace.getStyle('height')[0].toInt());
			new Drag.Move(innerblock.getFirst(), {
				limit: {
					x: [(blockheight.toInt() - replace.getStyle('height')[0].toInt()), 0], 
					y: [(blockwidth.toInt() - replace.getStyle('height')[0].toInt()), 0]
				}
			});
			replace.setStyle('cursor','move');
		}

	}


});

	function close_panel(block){
		var fx = new Fx.Style(block, 'opacity', {duration:500});
		fx.start(1,0);
		return false;
	}