$(function() {
    
    var pagerContainer = 'bildwechslerPager';
    var containerName = 'bildwechsler';
    var itemName = 'bildwechslerItem';
    var buttonWeiter = 'next';
    var buttonZurueck = 'prev';
    var buttonPause = 'pause';
    var buttonPlay = 'play';
    var myScopeWidthSmall = 970;
    var myScopeHeightSmall = 380;
    var myScopeWidthBig = 1200;
    var myScopeHeightBig = 470;
    var pagerPic = '/Images/Design/pagerPic.png';
    var autoPagingSpeed = 5000;
    
    
    var myScopeWidth = myScopeWidthSmall;
    var myScopeHeight = myScopeHeightSmall;
    var myScope = $('#' + containerName);
    var myScopeItems = $('#' + containerName + ' .' + itemName);
    var myScopePics = $('#' + containerName + ' .' + itemName + ' .bildwechslerItemPic');
    var myButtonNext = $('#' + buttonWeiter);
    var myButtonPrev = $('#' + buttonZurueck);
    var myButtonPause = $('#' + buttonPause);
    var myButtonPlay = $('#' + buttonPlay);
    var mySlider = $('#' + containerName + ' #slider');
    var myPager = $('#' + pagerContainer);
    var currentPic = 1;
    var currentSize ='small';
    var mainInterval;
    var currentItem;
    var itemCounter = 0;
	var myBrowser2;
	var myAlt;
	var myCurrentComment = currentPic;
	var currentHref;
	
	//$('.bildwechslerItem a').removeAttr('target');
    
    
    //dewfinitionen anwenden
    myScope.width(myScopeWidth).height(myScopeHeight);
    myScopeItems.width(myScopeWidth).height(myScopeHeight);
    myScopePics.width(myScopeWidth);
    mySlider.width(myScopeWidth*myScopeItems.length).height(myScopeHeight);
    
    //Button Weiter
    myButtonNext.click(function() {
        myNext();
    });
    
    var myNext = function() {
        if (currentPic < myScopeItems.length) {
            myAnimationNext();
            $('#' + pagerContainer + ' #pagerId_' + currentPic).removeClass('pagerActive').addClass('pagerInActive');
            currentPic++;
            $('#' + pagerContainer + ' #pagerId_' + currentPic).addClass('pagerActive').removeClass('pagerInActive');
        }
        
    };
    
    //Button Zurück
    myButtonPrev.click(function() {
        myPrev()
    });
    
    var myPrev = function() {
        if (currentPic > 1) {
            myAnimationPrev();
            $('#' + pagerContainer + ' #pagerId_' + currentPic).removeClass('pagerActive').addClass('pagerInActive');
            currentPic--;
            $('#' + pagerContainer + ' #pagerId_' + currentPic).addClass('pagerActive').removeClass('pagerInActive');
        }
        
    };
    
    //button Pause
    myButtonPause.click(function() {
        interuptInterval();
        extraFeatureStart();
    });
    
    //button Play
    myButtonPlay.click(function() {
        startInterval();
        extraFeatureStop();
    });
    
    
    //Animation
    var myAnimationNext = function() {
        interuptInterval();
        mySlider.animate({
            marginLeft: '-=' + myScopeWidth
        });
		setComment(currentPic);
        startInterval();
    }
    var myAnimationPrev = function() {
        interuptInterval();
        mySlider.animate({
            marginLeft: '+=' + myScopeWidth
        });
		setComment(currentPic);
        startInterval();
    }
    
    //jump to
    var myAnimationJumTo = function(newPic) {
		interuptInterval();
        var jumpWidth;
        if (newPic < currentPic && currentPic > 1) {
            jumpWidth = (currentPic - newPic) * myScopeWidth;
            mySlider.animate({
                marginLeft: '+=' + jumpWidth
            });
            $('#' + pagerContainer + ' #pagerId_' + currentPic).removeClass('pagerActive').addClass('pagerInActive');
            currentPic = currentPic - (currentPic - newPic);
            $('#' + pagerContainer + ' #pagerId_' + currentPic).addClass('pagerActive').removeClass('pagerInActive');

			setComment(newPic - 1);
			
        startInterval();
        }
        
        if (newPic > currentPic && currentPic < myScopeItems.length) {
            jumpWidth = (newPic - currentPic) * myScopeWidth;
            mySlider.animate({
                marginLeft: '-=' + jumpWidth
            });
            $('#' + pagerContainer + ' #pagerId_' + currentPic).removeClass('pagerActive').addClass('pagerInActive');
            currentPic = currentPic - (currentPic - newPic);
            $('#' + pagerContainer + ' #pagerId_' + currentPic).addClass('pagerActive').removeClass('pagerInActive');
	
			setComment(newPic - 1);
			
        startInterval();
        }
    }
    
    //Pager
    var currentPager;
    for (var i = 1; i <= myScopeItems.length; i++) {
        currentPager = myPager.html();
        myPager.html(currentPager + '<li id="pagerId_' + i + '" class="pagerInActive pagerItem"><img src="' + pagerPic + '" /><div>' + i + '</div></li>');
    }
    
    var myPagerItems = $('.pagerItem');
    var myPagerItemDiv = $('.pagerItem').click(function() {
        var current = $(this).children('div').html();
        myAnimationJumTo(current)
        
    });
    $('#' + pagerContainer + ' #pagerId_' + currentPic).addClass('pagerActive').removeClass('pagerInActive');
    
    //autoPaging
    
    function interuptInterval() {
        window.clearInterval(mainInterval);
    }
    
    
    var startInterval = function() {
        mainInterval = setInterval(function() {
            if (currentPic < myScopeItems.length){
                myNext()
            }
            else {
                myAnimationJumTo(1)
            }
        }, autoPagingSpeed);
    };
    
    startInterval();
    
    //autoPagingBig
    var autoPagingBig = function () {
        if(currentSize == 'small') {

        interuptInterval()
        currentSize = 'big'
        myScopeWidth = myScopeWidthBig;
        myScopeHeight = myScopeHeightBig;
        myScope.width(myScopeWidth).height(myScopeHeight);
        myScopeItems.width(myScopeWidth).height(myScopeHeight);
        myScopePics.width(myScopeWidth);
        mySlider.width(myScopeWidth*myScopeItems.length).height(myScopeHeight);
        currentPic = 1;
        $('#' + pagerContainer + ' .pagerActive').removeClass('pagerActive').addClass('pagerInActive');
        $('#' + pagerContainer + ' .pagerInActive').eq(0).removeClass('pagerInActive').addClass('pagerActive');

        mySlider.css('margin-left', '0');
        window.clearInterval(mainInterval);
        mainInterval = setInterval(function() {
        if (currentPic < myScopeItems.length){
            myNext()
            }
            else {
                myAnimationJumTo(1)
            }
            }, autoPagingSpeed);
        }
    };
    
    //autoPagingSmall
    var autoPagingSmall = function () {            
        if(currentSize == 'big') {
            interuptInterval()
            currentSize = 'small'
            myScopeWidth = myScopeWidthSmall;
            myScopeHeight = myScopeHeightSmall;
            myScope.width(myScopeWidth).height(myScopeHeight);
            myScopeItems.width(myScopeWidth).height(myScopeHeight);
            myScopePics.width(myScopeWidth);
            mySlider.width(myScopeWidth*myScopeItems.length).height(myScopeHeight);
            currentPic = 1;
            $('#' + pagerContainer + ' .pagerActive').removeClass('pagerActive').addClass('pagerInActive');
            $('#' + pagerContainer + ' .pagerInActive').eq(0).removeClass('pagerInActive').addClass('pagerActive');
            mySlider.css('margin-left', '0');
			window.clearInterval(mainInterval);
            //mainInterval = clearInterval();
            mainInterval = setInterval(function() {
            if (currentPic < myScopeItems.length){
                myNext()
                }
                else {
                    myAnimationJumTo(1)
                }
                }, autoPagingSpeed);
        }
        
    };



    //OnLoad
    $(window).ready(function() {
        if($(window).width() > 1280) {
            currentSize = 'small';
            autoPagingBig();
        }
        else
        {
            currentSize = 'big';
            autoPagingSmall();
        }
    });


    //browser
    $(window).resize(function() {
        myBrowser2 = $(window).width();
        if(myBrowser2 > 1280) {
            currentSize = 'small';
            autoPagingBig();
        }
        else {
            currentSize = 'big';
            autoPagingSmall();
        }
    });
    
    //extra Feature
    var extraFeatureStart = function() {
    };
    
    var extraFeatureStop = function() {
        
    };
	
	//Kommentar setzen
	var setComment = function(myCurrentComment) {
		myAlt = $('.bildwechslerItemPic').eq(myCurrentComment).attr('alt');
		currentHref = $('.bildwechslerItem:eq('+ myCurrentComment +') a').attr('href');
		if(currentHref == undefined) {
			currentHref = '#';
			$('#BWItemLink').removeAttr('href');
		}
		else {
			$('#BWItemLink').attr('href', currentHref);
		};
		console.log(currentHref);
		$('#scopeComment').html(myAlt);
	};
	
	setComment(0);

});