$.fn.infiniteCarousel = function () {

    function repeat(str, num) {
        return new Array( num + 1 ).join( str );
    }
  
    return this.each(function () {
        var $wrapper = $('.sliderwrapper',this),
			my = $(this),
            $items = $wrapper.find('.slide'),
            singleWidth = 960, 
            currentPage = 1,
            pages = $items.length;
		
        function gotoPage(page) {
			if($wrapper.is(':animated')) {
				return false;
			}
			if(page > pages){page = 1;}else if(page < 1){page = pages;}
            var dir = page < currentPage ? -1 : 1,
                n = Math.abs(currentPage - page),
                left = singleWidth * dir * n;
				
			$wrapper.animate({
				scrollLeft : '+=' + left
			}, 500);
			
			currentPage = page;
			pagedot.removeClass('active').filter(function(index){return index == currentPage-1;}).addClass('active');
			
            return false;
        }
		
		var pagedothtml='';
		$items.each(function(){
			pagedothtml += '<li>dot</li>';
		});
        
        my.find('nav').find('ul').css({width:18*pages}).html(pagedothtml);
		my.find('.slides').css({width:singleWidth*pages});
		
		var pagedot = my.find('nav').find('ul').children();
		pagedot.filter(':first').addClass('active');
        
        my.find('nav').find('.left').click(function () {
            return gotoPage(currentPage - 1);                
        });
        
        my.find('nav').find('.right').click(function () {
            return gotoPage(currentPage + 1);
        });
        
		pagedot.click(function () {
			return gotoPage(pagedot.index($(this))+1);
		});
		
        $(this).bind('goto', function (event, page) {
            gotoPage(page);
        });
		
		$wrapper.flickable({section: '.slide' , friction:0.4 ,elasticConstant:0.7}).bind('flickchange', function(event, ui) {
			var newslide = $(ui.newSection);
			if(ui.newSection == ui.oldSection){
				return false;
			}else{
				var index = $items.index(newslide);
				currentPage = index+1;
				pagedot.removeClass('active').filter(function(index){return index == currentPage-1;}).addClass('active');
			}
		});
    });  
};

function loadXML() {
	var xmlurl = 'xml/hp.xml';
	
	var self = this;
		$.ajax({
			url : xmlurl, 
			type : 'GET',
			success : function (xml) {
				xmlSetUp($(xml));
			},
			error : function () {
				alert("XML LOADING ERROR");
			}
		});
}

function xmlSetUp(xml) {
	var images = '';
	xml.find('itemimage').each(function(){
		images += '<img style="display:block;" src="http://store.headporter.co.jp'+$(this).text()+'" alt="" />';
	});
	
	var bgimgs = $('#bg').html(images).children().css({display:'none'}),
	currentImg = 1,
	totalImgs = bgimgs.length;
	
	bgimgs.filter(':first').fadeIn('slow');
	
	if(totalImgs < 2) {
		return false;
	}
	
	var intfunc = function() {
		var nextimgnum = currentImg+1;
		if(nextimgnum > totalImgs) {
			nextimgnum = 1;
		}
		bgimgs.fadeOut('slow').filter(function(index){return index === nextimgnum - 1;}).fadeIn('slow');
		currentImg = nextimgnum;
	};
	
	setInterval(intfunc,7000);
}

$(document).ready(function(){
		var onlinestorelogo = $('.onlinestorewrapper').find('header'),
		logoheight = 134,
		logowidth = 179,
		bgleft = $('.bgleft').css({opacity:0.8}),
		bgright = $('.bgright').css({opacity:0.8});
		
		$('.slider').infiniteCarousel();
		
		if($.os !== 'ipad' && $.os !== 'iphone' && $.os !== 'ipod') {
			$('#japanstorewrapper').hover(
				function() {
					onlinestorelogo.stop().animate({'margin-left':-(logowidth/2)-200},1000,'easeOutExpo');
					bgleft.stop().css({opacity:0.5});
				},
				function() {
					onlinestorelogo.stop().animate({'margin-left':-(logowidth/2)},1000,'easeOutExpo');
					bgleft.stop().fadeTo(1000,0.8);
				}
			);
			
			$('#internationalstorewrapper').hover(
				function() {
					onlinestorelogo.stop().animate({'margin-left':-(logowidth/2)+120},1000,'easeOutExpo');
					bgright.stop().css({opacity:0.5});
				},
				function() {
					onlinestorelogo.stop().animate({'margin-left':-(logowidth/2)},1000,'easeOutExpo');
					bgright.stop().fadeTo(1000,0.8);
				}
			);
		} else {
			bgright.stop().css({opacity:0.5});
			bgleft.stop().css({opacity:0.5});
		}
		
		
		loadXML();
});