/*
 * jQuery Transition PixelSlider 1.5 - http://www.pixelcloth.com
 *
 * Easy jQuery Transition Slider plugin
 *
 * Open source under the BSD License.
 *
 * Copyright © 2010 Pixelcloth
 * All rights reserved.
 *
 */


(function($) {

    $.transitionSlider = {
	defaults: {
	    slideWidth: 700,		// slide width
	    slideHeight: 400,		// slide height
	    selSlide: 0,		// selected slide
	    autoScrollTimer: 0,		// the duration after the slider changes the slide automatically (in seconds),
	    // if set to 0 then autoscroll is disabled
	    animationSpeed: 1000,	// animation speed
	    animationStyle: 1,		// there are currently 3 styles implemented:
	    // 1. fade from left to right ( or viceversa )
	    // 2. curtain effect from left to right ( or viceversa )
	    // 3. random fade effect
	    // 4. curtain effect from top to down
	    delay: 10,			// the delay after which individual pieces will start to fade
	    nextButton: '',		// id of a hyperlink used to go to the next slide
	    prevButton: '',		// id of a hyperlink used to go to the previous slide
	    hasNavBar: true,		// if true an navigation bar will automatically be created,
	    // to configure it use the css file transition-style.css
	    animationType: 'easeOutQuint',  // animation type, use the jquery easing plugin for more effects
	    pieceV: 5,			// pieces used on the vertical ( rows )
	    pieceH: 10,			// pieces used on the horizontal ( columns )
	    fromLeftToRight: true,	// animation will start from left to right
	    forceDirection: false,	// the direction set above will be forced, otherwise if the user selects a lower slide from the
	    // the one which is currently selected, then the animation will start from right to left
	    detailsLinkName: 'Details'	// the navigation bar will contain a button which will redirect the page to the address specified
	// in the hyperlink which contains the selected slide
	}
    };


    $.fn.extend({
	transitionSlider:function(config) {
	    config = $.extend({}, $.transitionSlider.defaults, config);
	    config.sliderContainer = $('#' + this.attr('id'));
	    initializeSlider(config);
	    return this;
	}
    });


    function initializeSlider(config) {

	config.pieceWidth = Math.ceil(config.slideWidth / config.pieceH);
	config.pieceHeight = Math.ceil(config.slideHeight / config.pieceV);
	config.isTrans = false;
	config.slideList = config.sliderContainer.find('li');

	config.sliderContainer.css({
	    width: config.slideWidth + 'px',
	    height: config.slideHeight + 'px'
	});

	config.noSlides = config.slideList.length;

	config.slideList.css({
	    position: 'absolute',
	    zIndex: 0,
	    width: config.slideWidth + 'px',
	    height: config.slideHeight + 'px',
	    display: 'none'
	});

	createPieceSlide(config, config.selSlide);
	createNavBar(config);


	if ( '' != config.prevButton && '' != config.nextButton ) {
	    $("#"+config.prevButton).click(function() {
		prevSlide(config);
	    });
	    $("#"+config.nextButton).click(function() {
		nextSlide(config);
	    });
	}

	if ( config.autoScrollTimer > 0 ) {
	    setInterval(function() {
		nextSlide(config);
	    }, config.autoScrollTimer * 1000);
	}
    }


    /*
     *
     * Navigation link menu creation */

    function createNavBar(config) {
	var noS = config.noSlides,
	navigator = '<ul id="slider-nav">',
	navList,
	i;

	for ( i = 0 ; i < noS ; i++ ) {
	    navigator += "<li><a href='#' class='off'>"+ (i + 1) +"</a></li>";
	}

	//	navigator += "<li id='details-link'><a href='#'>"+ config.detailsLinkName +"</a>";

	navigator += "</ul>";
	config.sliderContainer.parent().append(navigator);
	if ( config.hasNavBar === false ) {
	    $("#slider-nav a").css({
		display: 'none'
	    });
	}
	/*
	$("#slider-nav").css({
	    position: 'absolute',
	    zIndex: 10
	});
	*/
	//	detailLink = config.slideList.find('a').eq(config.selSlide).attr('href');
	//	config.sliderContainer.find('#slider-nav li#details-link a').attr('href', detailLink);

	navList = config.sliderContainer.parent().find('#slider-nav a');
	config.navList = navList;
	navList.eq(config.selSlide).attr('class', 'on');


	/*
	 * Click event registration */

	navList.click(function() {
	    var selIndex = navList.index($(this));

	    if ( config.selSlide != selIndex && config.isTrans === false ) {
		config.slideList.eq(selIndex).css({
		    zIndex: 0,
		    display: 'block'
		});
		config.isTrans = true;
		if ( config.forceDirection === false ) {
		    if ( config.selSlide < selIndex ) {
			config.fromLeftToRight = true;
		    } else {
			config.fromLeftToRight = false;
		    }
		}
		startPieceHavok(config, selIndex);
		config.selSlide = selIndex;
		navList.removeAttr('class');
		navList.eq(selIndex).attr('class', 'on');
	    }

	    return false;
	});
    }


    function createPieceSlide(config, index) {
	var line = 0,
	col = -1,
	totalPieces = config.pieceV * config.pieceH,
	elements = '',
	style = '',
	selImage = config.sliderContainer.find('li a img').eq(index),
	imagePath = selImage.attr('src'), i;

	for ( i = 0 ; i < totalPieces ; i++ ) {
	    elements += '<div class="slider-piece" ';
	    if ( i % config.pieceV == 0 ) {
		col++;
		line = 0;
	    }
	    style = 'position: absolute; ';
	    style += 'z-index: 2; ';
	    style += 'width: '+ config.pieceWidth + 'px; ';
	    style += 'height: '+ config.pieceHeight + 'px; ';
	    style += 'left: '+ col * config.pieceWidth +'px; ';
	    if ( config.animationStyle === 4 ) {
		style += 'bottom: '+ (line * config.pieceHeight) + 'px; ';
	    } else {
		style += 'top: '+ (line * config.pieceHeight) + 'px; ';
	    }
	    style += 'background: transparent url('+ imagePath + ') no-repeat scroll top left ;';
	    style += 'background-position: -'+ col*config.pieceWidth +'px -'+ (line*config.pieceHeight) +'px; ';

	    elements += 'style="'+ style +'"></div>';
	    line++;
	}
	config.sliderContainer.append(elements);
    }


    function resetPieces(config, toIndex) {
	var list = config.sliderContainer.find('div.slider-piece'),
	selImage = config.slideList.find('a img').eq(toIndex).attr('src');

	list.css({
	    backgroundImage: 'url('+ selImage + ')',
	    width: config.pieceWidth + 'px',
	    height: config.pieceHeight + 'px',
	    opacity: 1
	});

	list.fadeIn(0);
	//	detailLink = config.slideList.find('a').eq(config.selSlide).attr('href');
	//	config.sliderContainer.find('#slider-nav a').attr('href', detailLink);
	config.slideList.eq(toIndex).fadeOut(0);
    }


    function startPieceHavok(config, toIndex) {
	var totalPieces = config.pieceV * config.pieceH,
	list = config.sliderContainer.find('div.slider-piece'),
	index = 0, i, j;

	if ( config.animationStyle === 3 ) {
	    randomAnimation(config, toIndex);
	} else {
	    if ( config.fromLeftToRight === true ) {
		for ( i = 0; i < totalPieces; i++ ) {
		    index++;
		    orderedAnimation(index, toIndex, config, list, i);
		}
	    } else {
		for ( j = totalPieces - 1; j >= 0; j-- ) {
		    index++;
		    orderedAnimation(index, toIndex, config, list, j);
		}
	    }
	}
    }

    function orderedAnimation(index, toIndex, config, list, i) {
	switch (config.animationStyle) {
	    case 1 :
		list.eq(i).delay((index-1) * config.delay).fadeOut(config.animationSpeed, function() {
		    if ( index == config.pieceV * config.pieceH ) {
			config.isTrans = false;
			resetPieces(config, toIndex);
		    }
		});
		break;
	    case 2 :
		list.eq(i).delay((index-1) * config.delay).animate({
		    width: '0px',
		    opacity: 0
		}, config.animationSpeed, function() {
		    if ( index == config.pieceV * config.pieceH ) {
			config.isTrans = false;
			resetPieces(config, toIndex);
		    }
		});
		break;
	    case 4 :
		list.eq(i).css({
		    bottom: 0 + 'px'
		});
		list.eq(i).delay((index-1) * config.delay).animate({
		    height: '0px',
		    opacity: 0
		}, config.animationSpeed,  function() {
		    if ( index == config.pieceV * config.pieceH ) {
			config.isTrans = false;
			resetPieces(config, toIndex);
		    }
		});
		break;
	}
    }


    function randomAnimation(config, toIndex) {
	var list = config.sliderContainer.find('div.slider-piece'),
	indexArray = new Array(),
	randomIndex,
	index = 0,
	elemIndex, i;

	for ( i = 0 ; i < list.length ; i++ ) {
	    indexArray[i] = i;
	}
	
	elemIndex = indexArray.length;
	while ( indexArray.length > 0 ) {
	    randomIndex = generateRandom(indexArray.length - 1);
	    list.eq(indexArray[randomIndex]).delay(index * config.delay).fadeOut(config.animationSpeed, function() {
		if ( elemIndex == 1 ) {
		    config.isTrans = false;
		    resetPieces(config, toIndex);
		}
		elemIndex--;
	    });

	    indexArray.splice(randomIndex, 1);
	    index++;
	}
    }


    function generateRandom(interval) {
	return Math.floor(Math.random() * interval);
    }


    function nextSlide(config) {
	var next = config.selSlide + 1;
	if ( next > config.noSlides - 1 ) {
	    next = 0;
	}
	config.navList.eq(next).click();
	config.selSlide = next;
    }


    function prevSlide(config) {
	var next = config.selSlide - 1;
	if ( next < 0 ) {
	    next = config.noSlides - 1;
	//	    prev = 0;
	}
	config.navList.eq(next).click();
	config.selSlide = next;
    }


})(jQuery);