/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

Cufon.replace('.stripes_lg', { fontFamily: 'DINEngschriftStd' });
Cufon.replace('.stripes_md', { fontFamily: 'DINEngschriftStd' });
Cufon.replace('.stripes_sm', { fontFamily: 'DINEngschriftStd' });
Cufon.replace('.block-title', { fontFamily: 'DINEngschriftStd' });
Cufon.replace('.page-title h1', { fontFamily: 'DINEngschriftStd' });
Cufon.replace('h1.DINEngschrift', { fontFamily: 'DINEngschriftStd' });
Cufon.replace('.angled_image_text', { fontFamily: 'bauhaus' });
Cufon.replace('.h2-stripe-bg, #sidebar h2, h2.DINEngschrift, .block h1, button.button span, .cart-table h2 a', { fontFamily: 'DINEngschriftStd' });


if(!window.Ritte) var Ritte = {};

/*Expanding Image Viewer for Bike View Page*/
Ritte.ExpandingImageViewer=function(target, thumbnails){
    var container = jQuery(target);
    var next = container.find( ".next" );
    var previous = container.find( ".previous" );
    var close = container.find( ".close" );
    var currentImage = 0;
    var images = [];
    var mainImage = container.find("#image");
    var state = "closed";
    var that = this;
    
    jQuery(thumbnails).each(
        function(){
            
            var bigImgSrc = this.href;
            var thumbImg = jQuery("img", this)[0];
            var targetImg = jQuery(target+" img")[0];
            var bigImg = document.createElement('img');
  
            //preload images
            thumbImg.style.bigImgSrc="none";
            bigImg.src = bigImgSrc;
           
            images.push(bigImg);
        }
    )

    function doOpen(el){
        jQuery(el).animate({
            height:"543px"
            }, 1000, function() {
               if( currentImage+1 == images.length ) next.css("display","none");
               else next.css("display","block");

               if( currentImage == 0 ) previous.css("display","none");
               else  previous.css("display","block");

               close.css("display","block");
            });
        state = "open";
        return false;
    }
    function doClose(el){
         jQuery(container).animate({
            height:"233px"
            }, 1000, function() {
                next.css("display","none");
                close.css("display","none");
                previous.css("display","none");
            });
        state = "closed";
        return false;
    }
    
    //add expand event
    jQuery( container.get() ).bind("click",function(){
        if( state =="closed" ) return doOpen(this);
        else return doClose(this);
        
    })
     //add close event
    jQuery( close.get() ).bind("click",function(){
        return doClose( this );
    })
    
    //add next event
    jQuery(  next.get() ).bind("click",function(){
        if( currentImage+1 < images.length ){
            currentImage++;
            mainImage.attr("src",images[currentImage].src);

            if( currentImage+1 == images.length ) next.css("display","none");
            else if ( currentImage>0 ) previous.css("display","block");
        }
        return false;
    })
     //add previous event
    jQuery(  previous.get() ).bind("click",function(){
        if( currentImage >= 1 ){
            currentImage--;
            mainImage.attr("src",images[currentImage].src);

            if( currentImage+1 < images.length ) next.css("display","block");
            if( currentImage == 0 ) previous.css("display","none");
        }
        return false;
    })
    
}

/* An Object to display images on product specs page */
Ritte.ImageViewer=function(target, thumbnails){
    var cache = [];
    jQuery(thumbnails).each(
        function(){

            var thumbSrc = jQuery(this).href;
            var thumbImg = jQuery("img", this)[0];
            var targetImg = jQuery(target+" img")[0];
            var cacheImage = document.createElement('img');

            //preload images
            thumbImg.style.display="none";
            cacheImage.src = thumbSrc;
            cache.push(cacheImage);
            

            //hide thumbnail images and replace with background image
            this.style.display="block";
            this.style.height="109px";
            this.style.width="109px";
            this.style.backgroundImage="url("+thumbImg.src+")";
            this.style.backgroundPosition="center";

            //add event
            jQuery(this).bind("click",function(){
                targetImg.src=this.href;
                return false;
            })
            
        })
        
}