//Fisheye Scroller 1.0
//author: Mitchell Lindle
//date: 7/29/2009

(function($){  
 $.fn.fisheyescroller = function(options) {  
  
      //set defaults
      var defaults = {  
          containerWidth: 621,
          containerHeight: 400,
          speed: 'slow',
          startPosition: 'middle', //left, middle, right
          centerItemMaxWidth: 300,
          centerItemMaxHeight: 350,
          tierTwoHeightPercentage: 50,
          tierThreeHeightPercentage: 25,
          startItem: ''
      };  
      var options = $.extend(defaults, options);
      
    return this.each(function() {
    obj = $(this);
    var body = obj.html();
    
    //setup variables
    var secondTierHeight = options.containerHeight * (options.tierTwoHeightPercentage / 100);
    var thirdTierHeight = options.containerHeight * (options.tierThreeHeightPercentage / 100);
    var activeItem = 0;
    var totalWidth = 0;
    var totalItems = 0;
    var arrItems = [];
    var centerItem = 0;
   
    //get total width and fill item array with items' dimensions
    $('.fisheye-scroller-item').each(function (i) {
        obj = $(this);
        totalItems += 1; //iterate total items number
        var itemWidth = $(this).find('img').width();
        var itemHeight = $(this).find('img').height();
        //this is the original image dimensions
        arrItems[i] = new Array(i);
        arrItems[i][0] = new Array(itemWidth, itemHeight); //original dimensions
        arrItems[i][1] = ResizeDimensions(itemWidth, itemHeight, options.centerItemMaxWidth, options.centerItemMaxHeight, options.containerHeight); //center item dimensions
        arrItems[i][2] = ResizeDimensions(itemWidth, itemHeight, 0, secondTierHeight, options.containerHeight); //2nd tier item dimensions
        arrItems[i][3] = ResizeDimensions(itemWidth, itemHeight, 0, thirdTierHeight, options.containerHeight); //3rd tier item dimensions
        i++;
    });

    centerItem = ReturnDefaultCenterItem(options.startPosition,totalItems, options.startItem);
    
    //handle css
    $('#fisheye-scroller ul').attr({style: "height:" + options.containerHeight + "px;width:" + ReturnTotalWidth(centerItem, arrItems) + "px;margin:0;padding:0;list-style:none;margin-left:" + ReturnOffsetLeft(options.containerWidth, centerItem, arrItems) + "px;"});
    $('#fisheye-scroller li').attr({style: "margin:0;padding:0;list-style:none;float:left;"});
    $('#fisheye-scroller').attr({style: "width:" + options.containerWidth + "px;height:" + options.containerHeight + "px;float:left;overflow:hidden"});
   
    //setup default layout
    FormatItems(arrItems, centerItem, true, '', options.containerWidth, options.speed); 
    
    $('#fisheye-scroller-left').click(function() {
        if (centerItem > 0) {
            centerItem--;
            FormatItems(arrItems, centerItem, false, 'left', options.containerWidth, options.speed);
        }
        return false;
    });
    $('#fisheye-scroller-right').click(function() {
        if (centerItem < totalItems - 1) {
            centerItem++;
            FormatItems(arrItems, centerItem, false, 'right', options.containerWidth, options.speed);
        }
        return false;
    });
    
  }); 
 };  
})(jQuery); 

function FormatItems(arrItems, item, initial, direction, cW, speed) {
    if (initial == true) {
        $('.fisheye-scroller-item').each(function (i) {
            obj = $(this);
            if (i == item) {
                $(this).attr({style: "width:" + arrItems[i][1][0] + "px;float:left"});
                $(this).find('img').attr({style: "width:" + arrItems[i][1][0] + "px;height:" + arrItems[i][1][1] + "px;margin-top:" + arrItems[i][1][2] + "px;float:left"});
                ajaxGetDetails($(this).find('img').attr('src').replace("/site-assets/images/products/",""));
            }
            else if (i == (item - 1) || i == (item + 1)) {
                $(this).attr({style: "width:" + arrItems[i][2][0] + "px;float:left"});
                $(this).find('img').attr({style: "width:" + arrItems[i][2][0] + "px;height:" + arrItems[i][2][1] + "px;margin-top:" + arrItems[i][2][2] + "px;float:left"});
            }
            else {
                $(this).attr({style: "width:" + arrItems[i][3][0] + "px;float:left"});
                $(this).find('img').attr({style: "width:" + arrItems[i][3][0] + "px;height:" + arrItems[i][3][1] + "px;margin-top:" + arrItems[i][3][2] + "px;float:left"});
            }
            i++;
        });
    }
    else {
        //get current offsetLeft
        var offsetLeft = $('#fisheye-scroller ul').css("margin-left");
        if (direction == "left") {
            $('#fisheye-scroller ul').animate({marginLeft:ReturnOffsetLeft(cW,item,arrItems)}, speed);
        }
        else if (direction == "right") {
            $('#fisheye-scroller ul').animate({marginLeft:ReturnOffsetLeft(cW,item,arrItems)}, speed);
        }
        $('.fisheye-scroller-item').each(function (i) {
            obj = $(this);
            if (i == item) {
                $(this).animate({width:arrItems[i][1][0] + 'px'}, speed);
                $(this).find('img').animate({width:arrItems[i][1][0] + 'px',height:arrItems[i][1][1] + 'px',marginTop:arrItems[i][1][2]}, speed);
                ajaxGetDetails($(this).find('img').attr('src').replace("/site-assets/images/products/",""));
            }
            else if (i == (item - 1) || i == (item + 1)) {
                $(this).animate({width:arrItems[i][2][0] + 'px'}, speed);
                $(this).find('img').animate({width:arrItems[i][2][0] + 'px',height:arrItems[i][2][1] + 'px',marginTop:arrItems[i][2][2]}, speed);
            }
            else {
                $(this).animate({width:arrItems[i][3][0] + 'px'}, speed);
                $(this).find('img').animate({width:arrItems[i][3][0] + 'px',height:arrItems[i][3][1] + 'px',marginTop:arrItems[i][3][2]}, speed);
            }
            i++;
        });
    }
}

function ReturnTotalWidth(item, arrItems) {
    var width = 0;
    var i = 0;
    for (i=0;i<=(arrItems.length-1);i++) {
        width += arrItems[i][1][0];
    }
    return width;
}

function ReturnOffsetLeft(cW, item, arrItems) {
    var offsetLeft = 0;
    var i = item - 1;
    while (i>=0) {
        if (i == (item - 1)) {
            offsetLeft += arrItems[i][2][0];
        }
        else {
            offsetLeft += arrItems[i][3][0];
        }
        i--;
    }
    offsetLeft += ReturnImageCenter(arrItems[item][1][0]) - Math.round(cW * .5);
    offsetLeft = -offsetLeft;
    return offsetLeft;
}

function ReturnImageCenter(w) {
    return (Math.round(w * .5) - 1);
}

function ReturnDefaultCenterItem(start,totalItems, startItem) {
    var item = 0;
    if (startItem != '') {
        item = startItem;
    }
    else {
        if (start == "right") {
            item = totalItems - 1;
        }
        else if (start == "middle") {
            item = Math.round(totalItems * .5);
            item--;
        }
        else {
            item = 0;
        }
    }
    return item;
}

function ReturnOffsetTop(cH, iH) {
    return Math.round((cH - iH) * .5);;
}

function ResizeDimensions(oW,oH,tW,tH,cH) {
    var w,h;
    if (tW == 0) {
        w = Math.round((tH / oH) * oW);
        h = tH;
    }
    else {
        if (oW < oH) {
            w = Math.round((tH / oH) * oW);
            h = tH;   
        }
        else if (oW == oH) {
            h = Math.round((tW / oW) * oH);
            w = tW;
        }
        else {
            h = Math.round((tW / oW) * oH);
            w = tW;
        }
    }
    return new Array(w,h, ReturnOffsetTop(cH, h));
} 

function ajaxGetDetails(image) {
    var xmlhttp;
    $('.bottom-loading-panel-container').fadeIn();
    if (window.XMLHttpRequest)
      {
      // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else if (window.ActiveXObject)
      {
      // code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    else
      {
      alert("Your browser does not support XMLHTTP!");
      }
    xmlhttp.onreadystatechange=function()
    {
    if(xmlhttp.readyState==4)
      {
        $('.bottom-loading-panel-container').fadeOut();
        document.getElementById('info-container').innerHTML = xmlhttp.responseText;
      }
    }
    xmlhttp.open("GET","/site-assets/utilities/ajax-info.aspx?pid=" + image,true);
    xmlhttp.send(null);
}