/*
 * GLOBAL SETTINGS
 */
    
    var zoom_factor = 3;

/*
 * LIGHTBOX GALLARY
 */
jq(document).ready(function(){
    
    $thumbs = jq('.thumbs .thumb');
    
    $thumbs.find('.thumbLink').removeAttr('href');
    $thumbs.find('.thumbLink').css('cursor', 'pointer');
    
    $thumbs.click(function() {
        src  = jq(this).find("a[rel='productGallery']").attr('href')
        l_href = jq(this).find("a[rel='lightbox']").attr('href')
        z_href = jq(this).find("a[rel='zoom']").attr('href')
        
        $galleryImage = jq('.productGallery .image');
        $galleryImage.find('.lightbox').remove();
        $galleryImage.find('.big_thumb').remove();
        
        html_img = '<img class="big_thumb" alt="" src="'+src+'" />'
        if (z_href != '')$galleryImage.prepend('<a class="lightbox" href="'+l_href+'" rel="lightbox">'+html_img+'</a>');
        else $galleryImage.prepend(html_img);
        
        var img = new Image();
        img.src = z_href
        $zoomedImage = $galleryImage.find('.zoomedImage')
        $zoomedImage.empty()
        $zoomedImage.append(img)
        
        $gallaryImage.find('img').load(function() {
            width  = $gallaryImage.find('img').width() *zoom_factor;
            height = $gallaryImage.find('img').height()*zoom_factor;
            $zoomedImage.find('img').width(width)
                                    .height(height)
        });
    })
});

/*
 * TEXT SLIDER
 */

jq(document).ready(function(){
    $contentText = jq('.contentText');
    $contentText.prepend('<a class="moreInformation"><img alt="arrow-down" src="++resource++kokon_arrow-slideDown.png" />'+TextSlider_MoreInformationText+'</a>');
    $contentText.prepend('<a class="hideInformation"><img alt="arrow-down" src="++resource++kokon_arrow-slideUp.png" />'+TextSlider_HideInformationText+'</a>');
    
    $contentText.find('.text').hide();
    $contentText.find('.hideInformation').hide();
    $contentText.find('.hideInformation').css('cursor', 'pointer');
    $contentText.find('.moreInformation').css('cursor', 'pointer');
    
    $contentText.find('.moreInformation').click(function (){
        $contentText.find('.moreInformation').hide();
        $contentText.find('.hideInformation').fadeIn();
        $contentText.find('.text').slideDown();
    });
    
    $contentText.find('.hideInformation').click(function (){
        $contentText.find('.hideInformation').hide();
        $contentText.find('.moreInformation').fadeIn();
        $contentText.find('.text').slideUp();
    });
});

/*
 * IMAGE ZOOM
 */
jq(document).ready(function(){
    
    $gallaryImage = jq('.productGallery .image');
    $gallaryImage.css('position', 'relative')

    $gallaryImage.append('<div class="zoomedImage"></div>')
    $zoomedImage = $gallaryImage.find('.zoomedImage')
    $zoomedImage.hide();
    
    $zoomedImage.css('position', 'absolute')
                .css('top', '-1px')
                .css('left', ( parseInt( $gallaryImage.css('width'))+1)+'px')
                .css('background-color', '#ffffff')
                .css('border', '5px solid #E2E2E2')
                .css('width',  ( parseInt( jq('.infobox').css('width' )) + parseInt( jq('.productGallery').css('margin-right' )) - 5*2 )+'px' )
                .css('height', ( parseInt( jq('.productGallery').css('height')) - 5*2 )+'px' )
                .css('overflow', 'hidden');
    
    href = $gallaryImage.find("a.lightbox").attr('href');
    
    $gallaryImage.append('<a href="'+href+'" rel="lightbox"><div class="zoomedArea"></div></a>')
    $zoomedArea = $gallaryImage.find('.zoomedArea')

    $zoomedArea.css('background', '#ffffff')
               .css('opacity', '0.4')
               .css('cursor', 'pointer')
               .css('width',  ( parseInt( $zoomedImage.css('width' ))  / zoom_factor )+'px' )
               .css('height', ( parseInt( $zoomedImage.css('height' )) / zoom_factor )+'px' );
    $zoomedArea.wrap('<div class="zoomedAreaWrapper"></div>')
    $zoomedAreaWrapper = $zoomedArea.parent('.zoomedAreaWrapper');
    $zoomedAreaWrapper.css('border', '1px solid #e7bf8e')
                      .css('position', 'absolute')
                      .css('top',  '0px')
                      .css('left', '0px')
    $zoomedAreaWrapper.hide()
    
    $thumbs = jq('.thumbs .thumb');
    src = $thumbs.find("a[rel='zoom']").attr('href')
    var img = new Image();
    img.src = src
    $zoomedImage.append(img)
    $gallaryImage.find('img').load(function() {
            width  = $gallaryImage.find('img').width() *zoom_factor;
            height = $gallaryImage.find('img').height()*zoom_factor;
            $zoomedImage.find('img').width(width)
                                    .height(height)
        });
    
        
    $gallaryImage.mouseover(function(e){
        if($zoomedImage.find('img').attr('src') != ''){
            $zoomedImage.show();
            $zoomedAreaWrapper.show();
        }
    })
    
    $gallaryImage.mouseout(function(e){
        $zoomedImage.hide();
        $zoomedAreaWrapper.hide();
    })
    $zoomedImage.mousemove(function(e){
        $zoomedImage.hide();
        $zoomedAreaWrapper.hide();
    })
    
    $gallaryImage.mousemove(function(e){
        var pos = jq(this).position();
        
        x = (e.pageX-pos.left)-$zoomedAreaWrapper.width()/2;
        y = (e.pageY-pos.top) -$zoomedAreaWrapper.height()/2;
        
        if(x<0)x=0;
        if(y<0)y=0;
        if(x>jq(this).width() -$zoomedAreaWrapper.width()) x=jq(this).width() -$zoomedAreaWrapper.width()-2;
        if(y>jq(this).height()-$zoomedAreaWrapper.height())y=jq(this).height()-$zoomedAreaWrapper.height()-2;
        
        $zoomedAreaWrapper.css('left', x+'px');
        $zoomedAreaWrapper.css('top',  y+'px');
        
        $zoomedImage.find('img').css('left', (-(x-($gallaryImage.width()-$gallaryImage.find('a img').width())/2)*zoom_factor)+'px')
                                .css('top',  (-y*zoom_factor)+'px')
                                .css('position', 'absolute');
    });
});