/* easyslides */

(function($){ 
$.fn.easySlides = function(options) {

    // Set default variables in an array
    var defaults = {
        noImages: 2,
        path: '',
        captions:null,
        links:null,
        linksOpen:'sameWindow',
        timerInterval: 1000,
	randomise:false
    };

    // Extend default variable array using supplied options, making opional arguments possible
    options = $.extend(defaults, options);

    // Initialse other global variables...
    var divNo=1;
    var imgNumber;
    var timer;
    var path;

    // Initialise image number...
    if (options.randomise===true){ // Has the user chosen to begin with a random image number?
        imgNumber = Math.ceil((options.noImages)*Math.random());  // Generate a number between 1 and noImages
    } else {
        imgNumber=1;  // Else just start at image number 1
    }
    
    // Cache some selectors...
    var container = $(this);

    // Create the elements we need to manipulate inside the main container...
    $(container).append('<div class="easy_slides_img1"></div><div class="easy_slides_img2"></div><div class="easy_slides_caption"></div>');

    // Cache some more selectors...
    var img1 = $('.easy_slides_img1',container);
    var img2 = $('.easy_slides_img2',container);
    var caption = $('.easy_slides_caption',container);

    // Define a function to be run using setInterval...
    function fi(firstRun){

        // Initialise firstRun variable...
        firstRun = typeof(firstRun) != 'undefined' ? firstRun : false;
        
        // Reset the image number if its greater than total number of images, so it loops back to 1...
        if( imgNumber>options.noImages ){ imgNumber=1; }

        // Create new image object
        var img = new Image();

        // Construct image path from the path provided by user and the image number, but should this really be hardcoded to just .jpg?
        path = options.path+imgNumber+'.jpg';

        // Is this the first time the function has been run?
        if (firstRun===true){
            
            // Load image number 1 and show it...
            $(img).load(function(){
                img1.append(img); // Append the image object to #img1
                if (options.links!==null && options.links[imgNumber]!=''){
                        cacheImgNumber=imgNumber;
                         $('img',img1).css('cursor','pointer').click(function(){
                            if (options.linksOpen==='newWindow'){
                                window.open(options.links[cacheImgNumber]);
                            } else {
                                window.location.href=options.links[cacheImgNumber];
                            }
                        });
                    }
                    img1.fadeIn(function(){
                        if (options.captions!==null){ // Check if captions have been suplied or not
                            caption.html(options.captions[imgNumber]).fadeIn(); // Bring up the caption
                        }
                        // Increment image number. Got to be here or it increments before fadeOut happens.
                        imgNumber++;
                    });
            })
            .error(function () {
                container.html('<b>Error Loading Image:</b> '+path); // If there is an error display a message
            })
            .attr('src', path); // attatch the image and action the stuff above like the fade in.

        } else { // If this isnt the first run...
            
            // Load image
            $(img).load(function(){

                // Toggle between the two container divs
                if (divNo==1){
                    upperImg = img1;
                    lowerImg = img2;
                } else {
                    upperImg = img2;
                    lowerImg = img1;
                }

                // To begin with we assume the following css has been applied in the stylesheet...
                // #img1{z-index:2} #img2{z-index:1;display:none;}
                lowerImg.append(img).show();                // Make image container 2 visible
                if (options.links!==null && options.links[imgNumber]!=''){
                    cacheImgNumber=imgNumber;
                    $('img',lowerImg).css('cursor','pointer').click(function(){
                        if (options.linksOpen==='newWindow'){
                            window.open(options.links[cacheImgNumber]);
                        } else {
                            window.location.href=options.links[cacheImgNumber];
                        }
                    });
                }
                upperImg.fadeOut(function(){                // Fade out container 1 to show container 2
                     upperImg.css('z-index','1');           // Put container 1 to the back
                     $('img',upperImg).remove();            // Remove the image in container 1
                     lowerImg.css('z-index','2');           // Bring container 2 to the front
                     if (options.captions!==null){       // Check if captions have been suplied or not
                         caption.fadeOut(function(){    // Do the caption
                            $(this).html(options.captions[imgNumber]).fadeIn();
                            // Increment image number. Got to be here or it increments before fadeOut happens.
                            imgNumber++;
                         });
                     } else {
                         imgNumber++;
                     }
                 });
                
            }).error(function () {
                clearInterval(timer);                       // Stop repeating!
                container.html('<b>Error Loading Image:</b> '+path); // If there is an error display a message
            })
            .attr('src', path);                             // attatch the image and action the stuff above
        }

        // Some stuff to toggle & reset the divNo counter....
        if (divNo==2){
            divNo=1;
        } else {
            divNo=2;
        }
    }

    // Finally we can run everything...
    return this.each(function() {

        fi(true); // Initially run the main function setting firstRun to true.
        timer = setInterval(fi , options.timerInterval); // Continue running it without firstRun option (this delaults to firstRun=false).

    });

};
})(jQuery);


/* easyslides end */

/* index_slide */

$(document).ready(function(){

    // Set up our options for the slideshow...
    var myOptions = {
        noImages: 5,
        path: "images/slideshow_images/",  // Relative path with trailing slash.
  
        links: { // Each image number must be listed here, unless no links are required at all, then links option can be ommitted.
            1:"",
            2:"http://www.thedigitalroom.co.uk/products/canvas/canvas-prints.html",
            3:"http://www.thedigitalroom.co.uk/products/acrylic/acrylic-prints.html",
            4:"http://www.thedigitalroom.co.uk/products/mdf/mdf-blockmounts.html",
            5:"http://www.thedigitalroom.co.uk/products/floating-frames/floating-frames.html",
           
        },
        linksOpen:'sameWindow',
        timerInterval: 6000, // 6500 = 6.5 seconds
	randomise: false // Start with random image?
    };

    // Woo! We have a jquery slideshow plugin!
    $('#index_slide_container').easySlides(myOptions);

})

/* index_slide end */

/* retina */
$(document).ready(function(){

	/* This code is executed on the document ready event */

	var left	= 0,
		top		= 0,
		sizes	= { retina: { width:190, height:190 }, webpage:{ width:734, height:323 } },
		webpage	= $('#webpage'),
		offset	= { left: webpage.offset().left, top: webpage.offset().top },
		retina	= $('#retina');

	if(navigator.userAgent.indexOf('Chrome')!=-1)
	{
		/*	Applying a special chrome curosor,
			as it fails to render completely blank curosrs. */
			
		retina.addClass('chrome');
	}
	
	webpage.mousemove(function(e){

		left = (e.pageX-offset.left);
		top = (e.pageY-offset.top);

		if(retina.is(':not(:animated):hidden')){
			/* Fixes a bug where the retina div is not shown */
			webpage.trigger('mouseenter');
		}

		if(left<0 || top<0 || left > sizes.webpage.width || top > sizes.webpage.height)
		{
			/*	If we are out of the bondaries of the
				webpage screenshot, hide the retina div */

			if(!retina.is(':animated')){
				webpage.trigger('mouseleave');
			}
			return false;
		}

		/*	Moving the retina div with the mouse
			(and scrolling the background) */

		retina.css({
			left				: left - sizes.retina.width/2,
			top					: top - sizes.retina.height/2,
			backgroundPosition	: '-'+(1.6*left)+'px -'+(1.35*top)+'px'
		});
		
	}).mouseleave(function(){
		retina.stop(true,true).fadeOut('fast');
	}).mouseenter(function(){
		retina.stop(true,true).fadeIn('fast');
	});
});

/* retina end */


/*png fix */

 var blank = new Image();
 blank.src = 'images/site-images/blank.gif';
 
 $(document).ready(function() {
   var badBrowser = (/MSIE ((5\.5)|6)/.test(navigator.userAgent) && navigator.platform == "Win32");
   if (badBrowser) {
     // get all pngs on page
     $('img[src$=.png]').each(function() {
       if (!this.complete) {
         this.onload = function() { fixPng(this) };
       } else {
         fixPng(this);
       }
     });
   }
 });
 
 function fixPng(png) {
   // get src
   var src = png.src;
   // set width and height
   if (!png.style.width) { png.style.width = $(png).width(); }
   if (!png.style.height) { png.style.height = $(png).height(); }
   // replace by blank image
   png.onload = function() { };
   png.src = blank.src;
   // set filter (display original image)
   png.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
 }


/*png fix end */