jQuery(document).ready(
    function($){
	function triggerMiniature(el, content_id){
	    /*
	     * makes miniature to slide up.
	     * shows html element with given id in wrapper for wide content.
	     */
	    $(el).addClass(
		'stripe-active-miniature'
	    ).animate(
		{
		    'top': '3px'
		}, 100
	    );
	    $('#stripe-content-hidden').append(
		$("#full-photo-wrapper").contents()
	    );
	    $("#full-photo-wrapper").append(
		$('#' + content_id)
	    );
	    $('.miniature-inner:not(#' + $(el).attr('id') + ')').removeClass(
		'stripe-active-miniature'
	    ).animate(
		{
		    'top': '10px'
		}, 100
	    );
	}
	function activateNextMiniature(wrappers){
	    /*
	     * trigger next to the right miniature from currently slided up.
	     */
	    var inner = $('.stripe-active-miniature');
	    var wrapper_id = min2wrap[inner.attr('id')];
	    var content_id = wrap2cont[wrapper_id];
	    var index = $.inArray(wrapper_id, wrappers);
	    if (index == -1){
	    } else {
		if (index == wrappers.length - 1) {
		    var next_wrapper_id = wrappers[0];
		} else {
		    var next_wrapper_id = wrappers[index+1];
		}
		triggerMiniature(
		    '#' + wrap2min[next_wrapper_id],
		    wrap2cont[next_wrapper_id]
		);
	    };
	};
	function backgroundImageURL(element_id){
	    /*
	     * returns clean URL to background image of given element id
	     */
	    var bi = $('#' + element_id).css('background-image');
	    return  bi.substr(4, bi.length - 'url()'.length);
	}
	function startStripeMiniatureSlideshow(wrappers){
	    /*
	     * activates next miniature in sequence after delay
	     */
	    $('#full-photo-wrapper').everyTime(
		miniature_change_delay,
		'stripe-miniature-slideshow',
		function(i){
		    activateNextMiniature(wrappers);
		}
	    );	    
	}
	stripe_collection.reverse();/*miniatures are in reverse order in HTML.*/
	stripe_collection = $.grep(
	    stripe_collection, 
	    function(ele, ind){
		return typeof(ele) != 'undefined';/* hello IE */
	    }
	);
	var wrappers = [];
	$.each(
	    stripe_collection,
	    function(i, val){
		wrappers.push(val[0]);
		$("#" + val[1]).hover(
		    function(){
			triggerMiniature(this, val[2]);
		    }
		);
	    }
	);
	
    function getRandomInt(min, max)
    {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }

	$('#miniature-collection').show();
	if (stripe_collection.length > 0) {
	    $("#" + (stripe_collection[getRandomInt(0, stripe_collection.length-1)][1])).trigger('mouseover');
	};
	/*
	 * miniatures slideshow should stop when mouse is over miniatures
	 * and resume when mouse leaves it
	 */
	startStripeMiniatureSlideshow(wrappers);
	//$(".miniature-wrapper").mouseenter(
	$('#full-photo-wrapper').mouseenter(
	    function(){
		$('#full-photo-wrapper').stopTime('stripe-miniature-slideshow');
	    }
	).mouseleave(
	    function(){
		startStripeMiniatureSlideshow(wrappers);
	    }
	);
	/*
	 * red stripe at underlying image is 25px height.
	 * forelying image should slide up according to this height precisely.
	 */
	var margin_top = '-25px';
	$.each(
	    slider_collection, 
	    function(i, val){
		if (typeof(val) != 'undefined' /* thanks IE */){
		    /*
		     * setup popup.
		     * when popup is turned on big stripe content should stop
		     * horizntal sliding. see onComplete and onClose.
		     */
		    $(val[0]).colorbox(
			{
			    'transition': 'elastic',
			    'opacity': '0.8',
			    'href': val[1],
			    'inline': true,
			    'innerHeight': 450,
			    'innerWidth': 450,
			    'scrolling': false,
			    /* make miniature stop change when popup is on */
			    onComplete: function(){
				$('#full-photo-wrapper').stopTime(
				    'stripe-miniature-slideshow'
				);
				/*$('#full-photo-wrapper').data(
				    'stripe'
				).should_pause = true;*/
			    },
			    onClosed: function(){
				startStripeMiniatureSlideshow(wrappers);
				/*$('#full-photo-wrapper').data(
				    'stripe'
				).should_pause = false;*/
			    }
			}
		    );
		    $(val[0]).mouseenter(
			function(){
			    $(val[2]).animate(
				{
				    'marginTop': margin_top
				},
				vertical_slide_duration
			    );
			}
		    ).mouseleave(
			function(){
			    $(val[2]).animate(
				{
				    'marginTop': '0'
				}, 
				vertical_slide_duration
			    );
			}
		    );   
		};
	    }
	);
	$("#slider-collection-container").show();
triggerMiniature(document.getElementById(stripe_collection[0][1]), stripe_collection[0][2]);
    }
);