// JavaScript Document

if ( window.jQuery ) {

    (function($){

        $.fn.preload = function(images,callback){

            var count = 1;

            var preloader;

            $(images).each(function(ix,item){

                preloader = new Image();

                $(preloader).load( function(){

                    $(preloader).unbind('load');

                    preloader = null;

                    

                    if ( ++count >= $(images).length )

                        callback();

                });

                preloader.src = item;

            });

            

            return this;

        };

        

    })(jQuery);

};



jQuery(function($){

    

    $('.info-panels .accordion').each(function(i,item){

        

        $(this).find('div').slideUp('fast');

        $(this).find('a').click(function(event){

            

            event.preventDefault();

            

            $('.info-panels div.accordion h1.active a').not(this).parent('h1').removeClass('active').next('div').removeClass('open').slideUp('slow');

            $(this).parent('h1').toggleClass('active').next('div').toggleClass('open').slideToggle('slow');

        });

    });

    

    $('.info-panels h1').hover(function(){$(this).addClass('over');},function(){$(this).removeClass('over');});



    $('#mainBox .title').after( $('<div />').addClass('loading').text('Loading high-resolution photos...'));

	

	$('.photos .main').prepend( $('<img />') ).append( $('<div />').addClass('zoom-tool') );

	

	$('.tech-tabs .making-of').click( function() {

		window.open( $(this).attr('href'), 'makingOf', 'width=320, height=260, menubar=no, location=yes');

		return false;

	});



	$('.photos .thumbnails img')

		.click( function() {

			//if (! $('.photos .main img') ) $('.photos .main').prepend( $('<img />') );

			$('.photos .main img').attr('src', $(this).attr('src').replace('t.jpg','.jpg'));

			$('.info-panels .panel.zoom-display').empty().html('<img src="' + $('.photos .main img').attr('src').replace('.jpg','h.jpg')+ '" />');

		})

		.mouseover( function() { $(this).css('border-color', 'white'); } )

	  	.mouseout( function() { $(this).css('border-color', '#919090'); } )

	  	

	  	.each( function(i) {

	  		var preload = new Image();

	  		preload.src = $(this).attr('src').replace('t.jpg','h.jpg');

	  		

	  		if ( i == 0 )

	  			$(this).click();

	  	});

	

	$('.tech-tabs img')

		.mouseover( function() {

			$(this).attr('src', $(this).attr('src').replace('.jpg','_o.jpg'));

		})

		.mouseout( function() {

			$(this).attr('src', $(this).attr('src').replace('_o.jpg','.jpg'));

		})

		.parent('a').filter( function() {

			return $(this).attr('href').indexOf('/tech-focus/making-of/') != -1;

		}).click( function( event) {

			event.preventDefault();

			window.open( $(this).attr('href'), 'makingOf', 'width=320, height=260, menubar=no, location=yes');

		});

		

	$('.photos .main')

		.mouseover( function() {

			$('.photos .main .zoom-tool').css('display','block');

			$(this).css('cursor','pointer');

		})

		.mousemove( function( e ) {

			var h, p, w, offset, zd, zi, zt;

			p		= {x: e.pageX, y: e.pageY};

			h		= $(this).height();

			w		= $(this).width();

			offset	= $(this).offset();

			zt		= { w: $('.photos .main .zoom-tool').width(),

						h: $('.photos .main .zoom-tool').height(),

						x: $('.photos .main .zoom-tool').offset().left,

						y: $('.photos .main .zoom-tool').offset().top

					  };

			

			

			// if the cursor is above or below the main photo, close the zoom-tool

			if ( p.y < offset.top || p.y > offset.top+h )

				$(this).mouseout();

			// if the cursor is past the left or right edge of the main photo, close the zoom-tool

			if ( p.x < offset.left || p.x > offset.left+w )

				$(this).mouseout();

			

			// set the position of the zoom-tool to be roughly centred around the cursor

			$('.photos .main .zoom-tool')

				.css('top', p.y - offset.top - zt.h/2 )

				.css('left', p.x  - offset.left - zt.w/2 )

			;

			

			// unhide the zoom display panel

			zd = $('.info-panels .panel.zoom-display').addClass('show');

			

			// set the position of the panel so that it matches the area being centred around the cursor

			//263 338

			//alert( 0 - (zt.y - offset.top) * $('.info-panels .panel.zoom-display img').height()/h );

			zi = $('.info-panels .panel.zoom-display img')

			zi.css('top',  (0 - (zt.y - offset.top)  * (zi.height()/h) ))

			  .css('left', (0 - (zt.x - offset.left) * (zi.width()/w) ));

			  

			

		})

		.mouseout( function() {

			$('.photos .main .zoom-tool').css('display','none');

			$('.info-panels .panel.zoom-display').removeClass('show');

		})

	;

	

	$('.next-step.components .button')

		.mouseover( function() {

			$(this).attr('src', $(this).attr('src').replace('.gif','_o.gif'));

		})

		.mouseout( function() {

			$(this).attr('src', $(this).attr('src').replace('_o.gif','.gif'));

		})

	;

	

	$('.next-step.fastfor .button')

		.mouseover( function() {

			$(this).attr('src', $(this).attr('src').replace('.gif','_o.gif'));

		})

		.mouseout( function() {

			$(this).attr('src', $(this).attr('src').replace('_o.gif','.gif'));

		})

	;

	

	if ( typeof disableCS == 'undefined' ) disableCS = false;

	

	if (! (disableCS) )

		$('#mainBox .padding').append(

			$('<div />').addClass('to-colour-selector').append(

				$('<a />').attr('href','design.php').append(

					$('<img />').attr('src',myLocale!='frCA'?'../../../images/products/cs-button.gif':'../../images/products/cs-button.gif').hover(

						function(){

							$(this).attr('src', $(this).attr('src').replace('.gif','_o.gif') );

						},function(){

							$(this).attr('src', $(this).attr('src').replace('_o.gif','.gif') );

						}

					)

				)

			)

		);

});



function gi( i, o )

{

	if ( o && o.getElementById )

		return o.getElementById( i );

	else

		return document.getElementById( i );

}



function addLoadEvent(func) {

  var oldonload = window.onload;

  if (typeof window.onload != 'function') {

    window.onload = func;

  } else {

    window.onload = function() {

      oldonload();

      func();

    }

  }

}



function rolloverHandler( e ) {



	if (! e ) { var e = window.event; }



	var element;

	if (e.target)

		element = e.target;

	else if (e.srcElement)

		element = e.srcElement;



	var definition = gi('model-definition');

	

	if (! definition ) {

		return false;

	}



	if (e.type == 'mouseover') {

		definition.style.display = "block";

	} else if (e.type == 'mouseout') {

		definition.style.display = "none";

	}



}



addLoadEvent(function() {

	

	var element = gi('model-name');

	

	if (element) {

		if (element.addEventListener) {

			element.addEventListener('mouseover',rolloverHandler,false);

			element.addEventListener('mouseout',rolloverHandler,false);

		} else if (element.attachEvent) {

			element.attachEvent('onmouseover',rolloverHandler);

			element.attachEvent('onmouseout',rolloverHandler);

		}

	}



});