var focusedOnImage;
	var intervalListener;
	
	$(function() {
		if($('.img_map').length > 0) {
			$('.fashion-article-thumbs-text').hide();
            loadImageItems(0);
            var current = 0;
            var fashionImages = $('.fashion_img_wrapper').length;
			
			var currentDetailImg = 0;
			var fashionDetailImages = $('.fashion-article-thumbs-cell').length;

            $('#fashion-viewport').after('<div id="fashion-paging"></div>');
            // setup prev and next pages after all the page links have been added
            $('#fashion-paging').prepend('<a class="prev" href="#prev"><</a>&nbsp;');
            $('#fashion-paging').append('<a class="next" href="#next">></a>&nbsp;');

            // setup next link so that when it is click the appropriate
            // page will show
            $('.next').click(function() {
                if(current < fashionImages-1) {
                    $("#fashion-article-wrapper").animate({left: "-=633px"}, 1000);
                    showFashionPage($('.currentFashionImg').next(),$('.currentFashionImg'));
                    current++;
                }
                return false;
            });

            // setup prev link so that when it is click the appropriate
            // page will show
            $('.prev').click(function() {
               if(current > 0) {
                    $("#fashion-article-wrapper").animate({left: "+=633px"}, 1000);
                    showFashionPage($('.currentFashionImg').prev(),$('.currentFashionImg'));
                    current--;
                }
                return false;
            });
        }
	});
	
	function showFashionPage(nextPage,currentPage) {
    	$(nextPage).addClass("currentFashionImg");
        $(currentPage).removeClass("currentFashionImg");
        loadImageItems($(nextPage).attr('id'));
    }
	
	function bindImageDetailButtons() {
		$('#details-left').unbind('click');
		$('#details-right').unbind('click');
		
		// attach details left click
		$('#details-left').click(function() {
			if(currentDetailImg < fashionDetailImages -3 ) {
				$('.fashion-detail-thumbs').animate({left:'-=230px'},400)
				currentDetailImg++;
			}
			
			return false;
		});
		
		// attach details left click
		$('#details-right').click(function() {
			if(currentDetailImg > 0 ) {
				$('.fashion-detail-thumbs').animate({left:'+=230px'},400)
				currentDetailImg--;
			}
			
			return false;
		});
	}
	
	function loadImageItems(id) {
         if(id <=0) {
            id = $('.currentFashionImg').attr('id');
         }

         $.ajax({
            type:       "POST",
            dataType:   "json",
            url:        "/doAjax",
            data:       "action=load_fashion_img_map&id="+id,
            success:    function(r) {
                            if(r.status == 'success') {
                                for(image in r.data) {
                                    if(!$('#image_'+r.data[image].id).length) {
                                        $('.currentFashionImg .img_map').after('<a href="#" class="img_map_link" id="image_'+r.data[image].id+'"><img src="/interface/images/ie-hack.gif" alt="" style="width:238px; height:112px;" /></a>');
                                        $('#image_'+r.data[image].id).css({top:r.data[image].y+'px',left:r.data[image].x+'px'});
                                        $('#image_'+r.data[image].id).css({width:r.data[image].width+'px',height:r.data[image].height+'px'});
                                    }
                                }
								$('.fashion-detail-thumbs').fadeOut(1000,function() {
									$('.fashion-detail-thumbs').html(r.detail);
									$('.fashion-article-thumbs-text').hide();
									$('.fashion-article-thumbs-cell').css({'opacity':'1','cursor':'pointer'});
									$(this).fadeIn(1000);
									
									currentDetailImg = 0;
									fashionDetailImages = $('.fashion-article-thumbs-cell').length;
									bindImageDetailButtons();
								});
								
                                if($('.img_map_link').length > 0) {
                                	 $('.img_map_link').click(function() {
                                     	if($(this).hasClass("clicked")) {
                                     		$('.img_map_link').each(function() {
                                     			$(this).removeClass("clicked");
                                     		});
                                     		getFashionImg(this);
                                     	} else {
                                     		$('.img_map_link').each(function() {
                                     			$(this).addClass("clicked");
                                     		});
                                     	}
                                     	return false;
                                     });
                                	
                                	
                                	                                	
                                	 $('.img_map_link').each(function() {
                                         $(this).hover(
                                            // hover on
                                            function() {
                                            	getFashionImg($(this));
                                            },
                                            // hover out
                                            function() {
												//fashionImgClose();
												focusedOnImage = this;	
												clearInterval(intervalListener);
                                            }
                                        );
                                    });
                                }
                            }
                        }
        });
    }
	
	function getFashionImg(element) {
		if (!$(element).hasClass('openDetails') && !($(element).hasClass('clicked'))) {
			fashionImgClose();
			
			//setInterval('fashionImgListener',100,this);
			focusedOnImage = element;
			intervalListener = setInterval(function() {
				if (focusedOnImage) {
					fashionImgOpen(focusedOnImage);
				}
			}, 700);
		}
	}
	
	function fashionImgOpen(element) {
		//$('.fashion-article-thumbs-text').hide();
		//$('.fashion-article-thumbs-cell').css({'margin-left':'0px'})
		clearInterval(intervalListener);
        var id = $(element).attr('id');
		$(element).addClass('openDetails');
        id = id.match(/image_(\d+)/)[1];
		var pos = $('#detail_'+id+' .fashion-article-thumbs-img').attr('id');
		pos = pos.match(/pos_(\d+)/)[1];
		
		//check if we're inside the viewport
		//move the content within the viewport as required
		if(pos > 3) {
			var leftPos = pos * 150;
			$('.fashion-detail-thumbs').animate({
				left: -leftPos + 'px'
			},300);
		} else {
			$('.fashion-detail-thumbs').animate({
				left: '0px'
			},300);
		}

		$('.fashion-article-thumbs-cell').css({'opacity':'0.75'});
        $('#detail_'+id).css({'opacity':'1'})
		if($('#detail_'+id).next().length) {
			$('#detail_'+id).next().animate(
				{marginLeft:'120px'},
				500,
				'',
				function() {
					$('#detail_'+id).next().css({'margin-left':'0px'})
					$('#detail_text_'+id).fadeIn(500)
				}		
			);
		} else {
			$('#detail_text_'+id).fadeIn(500);
		}
		
	}
	
	function fashionImgClose() {
		$('.img_map_link').each(function() {
			if ($(this).hasClass('openDetails')) {
				var id = $(this).attr('id');
				id = id.match(/image_(\d+)/)[1];
				$('.fashion-article-thumbs-cell').css({
					'opacity': '1'
				});
				$('#detail_text_' + id).fadeOut(500, function() {
					if ($('#detail_' + id).next().length) {
						$('#detail_' + id).next().css({
							'margin-left': '120px'
						})
						$('#detail_' + id).next().animate({
							marginLeft: '0px'
						}, 500)
					}
				});
				$(this).removeClass('openDetails');
				focusedOnImage = null;
			}
		});
	}