jQuery(document).ready(function() {
	
	// Store elements and values to speed up things js-wise
	 // This is the recommended width of the content area in the slide images.
	 // We need this value to calculate when to stop moving the slideshow to the left
	 // and how to center the slides on resize.
	var imgContentAreaWidth = 940;
	var winElm = $(window);
	var wrapperElm = $('#browsable_rectangular');
	var itemsWrapperElm = $('.items', wrapperElm);
	var scrollableApi = false;
	var slideImageWidth = $('img', wrapperElm).width();
	var slideWidthWithOffset = (slideImageWidth - (slideImageWidth - imgContentAreaWidth) / 2);
	var navigationWrapperElm = $('.navigation_container_rectangular');
	var quickNaviElm = $('.quickNavi', navigationWrapperElm);
	 // Fake value for now since this element wont be getting its width
	// until the scrollable plugin have been called below
	var quickNaviElmHalfWidth = -1;
	
	/**
	 * 
	 */
	var pxa_square_slideronWinResize = function() {
		
		// Get the index of the slide that is showing
		var curIndex = (scrollableApi === false ? 0 : scrollableApi.getIndex());
		
		var winWidth = parseInt($(window).width());
		
		var slideWidth = (winWidth < imgContentAreaWidth ? imgContentAreaWidth : winWidth);
		
		$('.items > div', wrapperElm).css('width', slideWidth);
		
		// Position the current showing slide correctly
		itemsWrapperElm.css('left', '-' + ((curIndex+1) * slideWidth) + 'px');
		
		var halfSlideWidth = (slideWidth/2);
		
		// Position the content of all slides correctly
		$('.squareImageSliderContentWrapper').css('margin-left', halfSlideWidth-512);
					
		// Calculate width of navigation elm wrapper
		var navigationWrapperElmWidth = winWidth - (((winWidth - slideImageWidth) / 2));
		
		if(navigationWrapperElmWidth < slideImageWidth) {
		
			// We dont want the arrows to disappear if the window is too narrow	
			navigationWrapperElmWidth = winWidth;
			
		}

		// Position this element to make sure that the arows are positioned correctly
		navigationWrapperElm.css({
			'width': navigationWrapperElmWidth + 'px',
			'margin-left': '-' + (navigationWrapperElmWidth/2) + 'px'
		});
		
	};
	
	// Call function once to initiate
	// We must do it before calling scrollable since it depends on sizes set by
	// the function
	pxa_square_slideronWinResize();
	
	// Show element now after it has been initially positioned
	$('.tx-pxasquareimageslider-pi1').css('visibility', 'visible');
	
	// Bind function to resize window event
	winElm.bind('resize', function() {
		
		pxa_square_slideronWinResize();
		
	});
   
   jQuery(wrapperElm).scrollable({
        circular: true,
        next: '.next_rectangular',
        prev: '.prev_rectangular'
    }).autoscroll(7000).navigator({
        navi: '.navi_rectangular'
    });
    
    $('.navi_rectangular a').eq(0).addClass('first');
    
    jQuery("#browsable").scrollable({
        circular: true,
        next: '.next',
        prev: '.prev'
    }).autoscroll(7000).navigator();
    
    scrollableApi = wrapperElm.data('scrollable');
    
    // Call function once again to initiate the quick nav
	pxa_square_slideronWinResize();
	
	// Position quick navi once and for all
	quickNaviElm.css({
					'margin-left': '-' + (quickNaviElm.width()/2) + 'px',
					'visibility': 'visible'
				});
    
});