hs4Arr=[

["toppageslide/life-design.jpg","http://www.dodici12.com/news/kobe-kitano-reform/","マンションの改装"],
["toppageslide/sugi.jpg","http://www.dodici12.com/houses/tokyo-mtei/","自然素材の住宅"],
["toppageslide/amano.jpg","http://www.dodici12.com/news/amanohasidate-modelhouse/","リゾートのモデルハウス"],
["toppageslide/tiara.jpg","http://www.dodici12.com/houses/16-kitano-jtei/","マンションの改装"],
["toppageslide/sumai-kitchen.jpg","http://www.dodici12.com/details/4kitchen/","オーダーメイドキッチン"],
["toppageslide/wa-corner.jpg","http://www.dodici12.com/houses/kurakuen-stei/","西宮の住宅"],
["toppageslide/pool.jpg","http://www.dodici12.com/news/awaji-ntei/","プール付別荘"],
["toppageslide/chichinpuipui.jpg","http://www.dodici12.com/list/faq/index2.html","ちちんぷいぷいの取材"],
["toppageslide/sumai-09-06.jpg","http://www.dodici12.com/houses/osaka-ttei/","大阪の住宅"],
["toppageslide/table.jpg","http://www.dodici12.com/static/design/4-1design.html","プロダクトでサイン"],
["toppageslide/kage.jpg","http://www.dodici12.com/news/kobe-nishiku/","神戸の木造住宅"],
["toppageslide/konnichiwa.jpg","http://www.dodici12.com/news/nishinomoya-stei/","雑誌に掲載"],
["toppageslide/tiles.jpg","http://www.dodici12.com/static/profile/1-4italian-tile.html","イタリアンタイル"],["toppageslide/sumai-8-8.jpg","http://www.dodici12.com/houses/awaji-pool/","住まいの設計/淡路島の別荘の紹介"],
["toppageslide/5-k3-well.jpg","http://www.dodici12.com/houses/3dgraphic/","CGウォークスルー"],
["toppageslide/dining.jpg","http://www.dodici12.com/houses/kobe-ktei/","神戸の木造住宅"],
["toppageslide/myhome100.jpg","http://www.dodici12.com/kikaku/cooperative/coopertive-system.html","西宮の注文住宅"],
["toppageslide/take.jpg","http://www.dodici12.com/houses/osaka-ttei/","大阪のデザイナーズ住宅"],
["toppageslide/sumai-7-12.jpg","http://www.dodici12.com/static/iedukuri/1-14gosoudan.html","スタジオドディチと家作り"],
["toppageslide/kitano.jpg","http://www.dodici12.com/details/2wall/","壁仕上げ材アイデア集"] // no comma at end of last index
]

dir=0 // 0 = left 1 = right
speed=2
imageSize=0  // % set to zero to use fixedWidth and fixedHeight values
fixedWidth=150 // set a fixed width
fixedHeight=150 // set a fixed height
spacerWidth=10 // space between images

alwaysCenter=1 // center the popup 0 = no 1 = yes
popupLeft=0 // popup default left, use if not centering
popupTop=0 // popup default top, use if not centering

biggest=0
ieBorder=0
totalWidth=0
hs4Timer=null

preload=new Array()
for(var i=0;i<hs4Arr.length;i++){
preload[i]=new Image()
preload[i].src=hs4Arr[i][0]
}

function initHS4(){
scroll1=document.getElementById("scroller1")

for(var j=0;j<hs4Arr.length;j++){
scroll1.innerHTML+='<img id="pic'+j+'" src="'+preload[j].src+'" alt="'+hs4Arr[j][2]+'" title="'+hs4Arr[j][2]+'" onclick="showBigPic('+j+')">'
if(imageSize!=0){ // use percentage size
newWidth=preload[j].width/100*imageSize
newHeight=preload[j].height/100*imageSize
}
else{ // use fixed size
newWidth=fixedWidth
newHeight=fixedHeight
}

document.getElementById("pic"+j).style.width=newWidth+"px"
document.getElementById("pic"+j).style.height=newHeight+"px"

if(document.getElementById("pic"+j).offsetHeight>biggest){
biggest=document.getElementById("pic"+j).offsetHeight
}

document.getElementById("pic"+j).style.marginLeft=spacerWidth+"px"

totalWidth+=document.getElementById("pic"+j).offsetWidth+spacerWidth

}

totalWidth+=1
for(var k=0;k<hs4Arr.length;k++){ // vertically center images
document.getElementById("pic"+k).style.marginBottom = (biggest-document.getElementById("pic"+k).offsetHeight)/2+"px"
}

scrollBox=document.getElementById("scroll_box")

if(document.uniqueID && scrollBox.currentStyle && document.compatMode!="CSS1Compat"){
ieBorder=parseInt(scrollBox.currentStyle.borderWidth)*2
}
if(document.getElementById&&document.all){
ieBorder=parseInt(scrollBox.style.borderTopWidth)*2
}

scrollBox.style.height=biggest+ieBorder+"px"

scroll1.style.width=totalWidth+"px"

scroll2=document.getElementById("scroller2")
scroll2.innerHTML=scroll1.innerHTML
scroll2.style.left= scroll1.offsetWidth+"px"
scroll2.style.top= 0+"px"
scroll2.style.width=totalWidth+"px"

if(dir==1){
speed= -speed
}

scrollHS4()
}


function scrollHS4(){
if(paused==1){return}
clearTimeout(hs4Timer)

scroll1Pos=parseInt(scroll1.style.left)
scroll2Pos=parseInt(scroll2.style.left)

scroll1Pos-=speed
scroll2Pos-=speed

scroll1.style.left=scroll1Pos+"px"
scroll2.style.left=scroll2Pos+"px"

hs4Timer=setTimeout("scrollHS4()",50)

if(dir==0){
if(scroll1Pos< -scroll1.offsetWidth){
scroll1.style.left=scroll1.offsetWidth+"px"
}

if(scroll2Pos< -scroll1.offsetWidth){
scroll2.style.left=scroll1.offsetWidth+"px"
}
}

if(dir==1){
if(scroll1Pos>parseInt(scrollBox.style.width)){
scroll1.style.left=scroll2Pos+ (-scroll1.offsetWidth)+"px"
}

if(scroll2Pos>parseInt(scrollBox.style.width)){
scroll2.style.left=scroll1Pos+ (-scroll2.offsetWidth)+"px"
}
}

}

st=null
function pause(){
clearTimeout(hs4Timer)
clearTimeout(st)
}

function reStartHS4(){
clearTimeout(st)
st=setTimeout("scrollHS4()",100)
}

paused=0
picWin=null

function showBigPic(p){

if(hs4Arr[p][1]!=""){
paused=1

if(picWin&&picWin.open&&!picWin.closed){picWin.close()} // if picWin exists close it

if(hs4Arr[p][1].indexOf("jpg")!=-1){
bigImg=new Image()
bigImg.src=hs4Arr[p][1]

if(alwaysCenter==1){
popupLeft = (screen.availWidth - bigImg.width) / 2
popupTop = (screen.availHeight - bigImg.height) / 2
}

data="\n<center>\n<img src='"+bigImg.src+"'>\n<\/center>\n"
var winProps = "left= "+popupLeft+", top = "+popupTop+", width="+(bigImg.width+20)+", height="+(bigImg.height+20)+", scrollbars=no, toolbar=no, directories=no, menu bar=no, resizable=yes, status=no"
picWin=window.open("","win1",winProps)
picWin.document.write("<HTML>\n<HEAD>\n<TITLE><\/TITLE>\n")
picWin.document.write("<\/HEAD>\n")
picWin.document.write("<BODY style='background-color:black;margin-top:10px;margin-left:10px'>\n")
picWin.document.write("<div id=\"display\">"+data+"<\/div>")
picWin.document.write("\n<\/BODY>\n<\/HTML>")
}
else{
picWin=window.open(hs4Arr[p][1])
}

}

}

window.onfocus=function(){
paused=0
scrollHS4()
}

onunload=function(){ // close the popup when leaving page
if(picWin&&picWin.open&&!picWin.closed){
picWin.close()
}
}